為什么 purgeCSS 會刪除我的 React-Bootstrap 應用程序使用的 styles？

Question

我正在嘗試從我的應用程序中清除未使用的 styles。 但是在清除時它仍然會刪除使用過的類並且該站點看起來很糟糕。

我正在使用以下軟件包：

  "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使用的類。

我也嘗試在postcss.config.js中添加css: ["./styles/**/*.scss, ./styles/**/*.css"] ，這似乎也沒有任何作用。

盡管如此，它仍然看起來很破：

雖然它看起來應該是這樣的：

Answer 1

'@fullhuman/postcss-purgecss' 插件中的這個配置道具將我的模態從清除中保存在 boostrap 中，所以我想你需要將 css 前綴添加到安全列表中，你需要保持未清除的確切 boostrap 組件

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