从反应项目中的 bootstrap 等框架中删除未使用的 CSS 类

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 已经写的那样，purgcss 工作得很好：purgcss 简单地搜索所有 JavaScript 文件以查找使用过的 CSS 文件中出现的 CSS class strings，并删除那些找不到的文件。

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

从反应项目中的 bootstrap 等框架中删除未使用的 CSS 类

Remove unused CSS classes from frameworks like bootstrap in a react project

javascript

reactjs

webpack

babeljs

babel-plugin-react-css-modules