为什么PurgeCSS会删除React-Bootstrap应用中正在使用的样式？

问题根因 #

React Bootstrap 内部大量类名是运行时动态拼接生成的，静态扫描react-bootstrap源码文件无法捕获完整的最终类名字符串，因此会被PurgeCSS判定为未使用而删除。 #

可直接落地的修改方案 #

1. 优化PurgeCSS safelist配置，匹配Bootstrap类前缀
   不用逐个添加用到的类，通过正则匹配所有Bootstrap常用类前缀，从根源避免误删，同时不影响未使用样式的清除效果。
2. 移除无意义的node_modules扫描路径
   扫描react-bootstrap源码既拖慢构建速度，也无法捕获动态拼接的类名，直接删除即可。
3. 限制PurgeCSS仅在生产环境执行
   避免开发环境调试时样式被误删，影响开发效率。

修改后完整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) || [],
          safelist: {
            // 基础保留类
            standard: ["html", "body"],
            // 匹配所有Bootstrap常用类前缀，可根据自己使用的组件补充正则
            standard: [/^btn/, /^col-/, /^container/, /^row/, /^card/, /^nav/, /^dropdown/, /^form/, /^modal/, /^alert/, /^badge/]
          }
        },
      ]
    ] : [])
  ],
};

生效验证步骤 #

1. 删除项目根目录下的.next缓存文件夹
2. 重新执行生产构建命令npm run build，再启动服务验证样式

之前添加的css配置不生效是因为语法错误，两个路径需要分开写为独立字符串，且通过PostCSS调用PurgeCSS时不需要额外指定CSS路径，该配置可以直接删除。

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