我正在尝试使用 purgecss 删除任何未使用的 css，尤其是 Bootstrap 中未使用的 css。使用 Purgecss 设置，我所有的 css 都被删除了，只保留了内联样式。这意味着 purgecss 正在删除所有 css 类的样式，而不仅仅是未使用的样式。我想让我的配置正确，以便只删除未使用的 css 样式。

由于我的 React 应用程序也使用 Post-css，我正在尝试使用postcss-purgecss插件，并按照该链接中的说明进行设置。

这发生在开发和生产模式中。

你可以在这个 github repo 的这个分支上测试这个问题

您可以在此 url https://purge-css-failing.netlify.app/查看发生的结果

postcss.config.js

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

module.exports = {
  plugins: [
    purgecss({
        content: ['./src/**/*.html']
    }),
  ]
};

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

module.exports = {
  plugins: [
    purgecss({
        content: ['./src/**/*.html']
    }),
  ]
};

webpack.config.js

回答

由于您的应用程序是 ReactJS 应用程序，您希望清除未在为开发或生产环境编译的 Javascript 包中使用的 css 类。

您可以更新postcss.config.js文件以匹配 .js 文件。

module.exports = {
  plugins: [
    purgecss({
      content: ["./src/**/*.js"],
      // Treat every word in the bundle as a CSS selector
      defaultExtractor: content => content.match(/[w-/:]+(?<!:)/g) || []

    }),
  ]
};

---

以上是Purge-css正在删除所有css样式，而不仅仅是未使用的样式的全部内容。

THE END

分享

二维码

如果我使用C代码，AndroidStudio无法调试

< <上一篇

如何使用`fmt::format`使`boost::stacktrace`格式化

下一篇>>