從反應項目中的引導程序等框架中刪除未使用的 CSS 類

Question

我們目前正在使用 webpack 和 babel 開發一個反應項目，並希望自動刪除我們使用的 CSS 框架 Bootstrap 和 AdminLTE 2 中未使用的 CSS 類。

在項目中我們使用webpack (v4.41.0) , babel (v7.6.2)和react (16.10.1) 。 要使用 CSS 類，我們使用 babel 插件babel-plugin-react-css-modules ，它使用 css 模塊。

什么是現代和現代的方式來做到這一點？

Answer 1

正如 djfdev 已經寫的那樣，purgcss 工作得很好：purgcss 只是搜索所有 JavaScript 文件，以查找使用過的 CSS 文件的CSS class 字符串的出現，並刪除那些找不到的文件。

Answer 2

您應該添加這兩個配置：

defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: {
  standard: ["html", "body"],
},

到你的 postcss 配置。 我正在使用 [craco][1]，這是配置文件的樣子：

const purgecss = require("@fullhuman/postcss-purgecss");

module.exports = {
  style: {
    postcss: {
      plugins: [
        purgecss({
          content: ["./src/**/*.html", "./src/**/*.js"],
          css: ["./src/**/*.css"],
          defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
          safelist: {
            standard: ["html", "body"],
          },
        }),
      ],
    },
  },
};

如果您使用的是 postcss 配置，它看起來應該是一樣的。 [1]: https://purgecss.com/guides/react.html#use-craco