如何解决NextJS 10.0.0中PurgeCSS移除未使用CSS时全量删除问题

问题根因 #

• CSS Modules会自动将组件内的类名编译为带哈希后缀的唯一类名，你源码中写的是原始类名，PurgeCSS扫描源码时匹配不到编译后的哈希类名，就会把这些样式误删
• React-bootstrap的组件类名是组件内部动态生成的，没有直接写在你的业务代码JSX/TSX里，默认扫描逻辑抓不到这些类名，也会被误删
• CSS Modules本身已经内置了未使用样式的剔除能力，不需要PurgeCSS重复处理，你只需要用PurgeCSS清理全局引入的第三方CSS（比如React-bootstrap的全局样式）即可

修复方案 #

1. 调整postcss配置 #

仅生产环境启用PurgeCSS，增加React-bootstrap类名白名单，优化匹配逻辑，修改后的postcss.config.js内容如下：

module.exports = {
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ],
    // 仅生产环境启用PurgeCSS，避免开发时样式异常
    process.env.NODE_ENV === 'production' ? [
      '@fullhuman/postcss-purgecss',
      {
        content: [
            './pages/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}'
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        // 跳过CSS Modules文件处理
        css: ['**/*.css', '!**/*.module.css'],
        safelist: {
          // 保留基础标签样式
          standard: ["html", "body"],
          // 匹配所有React-bootstrap的类名前缀，避免组件样式被误删
          greedy: [/^btn-*/, /^card-*/, /^modal-*/, /^nav-*/, /^dropdown-*/, /^form-*/, /^alert-*/, /^badge-*/, /^breadcrumb-*/, /^carousel-*/, /^collapse-*/, /^list-group-*/, /^popover-*/, /^progress-*/, /^spinner-*/, /^table-*/, /^tooltip-*/]
        }
      }
    ] : false
  ].filter(Boolean)
}

如果你的CSS Modules使用scss/less等预处理器，把配置里的!**/*.module.css替换为对应的后缀规则即可。如果有自定义的全局类名，也可以补充到safelist规则中避免被误删。

内容的提问来源于stack exchange，提问作者Dr tech