为什么purgeCSS删除样式使用我的反应-引导应用程序？

Question

我正试图从我的应用程序中清除未使用的样式。但是在清除的时候，它仍然删除了使用过的类，并且站点看起来已经损坏了。

我正在使用以下软件包：

  "dependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "autoprefixer": "^10.3.4",
    "bootstrap": "^5.1.1",
    "next": "^11.1.0",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^6.7.0",
    "react": "17.0.2",
    "react-bootstrap": "^1.6.3",
    "react-dom": "17.0.2",
    "sass": "^1.40.1"
  }

在./styles文件夹中，我也有一个导入@import "../node_modules/bootstrap/scss/bootstrap";的layout.scss。然后我将在import "../styles/layout.scss";中导入_app.js

我创建了一个包含以下内容的postcss.config.js：

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}",
          "./node_modules/react-bootstrap/**/*.js",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"],
      },
    ],
  ],
};

我已经包括了"./node_modules/react-bootstrap/**/*.js",，并在之前的一篇文章中推荐。这确实有点帮助，但仍然删除了react-bootstrap.使用的类。

我也尝试在css: ["./styles/**/*.scss, ./styles/**/*.css"]中添加postcss.config.js，这似乎也没有什么作用。

尽管如此，它看起来还是坏的：

​

​

虽然它应该是这样的：

​

​

Answer 1

这个配置好的“@fullhuman/postcss-purgecss”插件将我的调制解调器从清除中保存在引导程序中，因此，我猜您需要在保险箱中添加用于维护未清除的引导组件的css前缀。

safelist: {
            standard: ['html', 'body', 'btn'],
            deep: [/^col/, /^navbar/, /^nav/, , /^modal/]
          },