从框架中删除未使用的CSS类，如react项目中的引导程序

Question

我们目前正在开发一个使用webpack和babel的react项目，并希望自动删除我们使用的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所写的，purgecss运行得很好: purgcss只需搜索所有JavaScript文件中所使用的CSS文件中的CSS类字符串，并删除那些找不到的。

Answer 2

你应该加上这两件事：

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

到您的postcss配置。我使用的是craco，配置文件是这样的：

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