为什么 purgeCSS 会删除我的 React-Bootstrap 应用程序使用的样式？

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有一个layout.scss导入位置。@import "../node_modules/bootstrap/scss/bootstrap";然后我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

'@full human/postcss-purgecss' 插件中配置的道具将我的模态保存在 boostrap 中以防止清除，所以我想您需要将您需要保持未清除的确切 boostrap 组件中使用的 css 前缀添加到安全列表中

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