NextJS+PurgeCSS修改类名需重启服务器的问题求助

核心问题分析 #

你遇到的情况是因为PurgeCSS在开发环境下依然执行了样式清理——尽管你设置了enableDevPurge: false，但部分版本的@fullhuman/postcss-purgecss对该参数的处理存在偏差，加上PostCSS插件默认会在所有环境加载，导致开发时仅在服务器启动时扫描一次内容文件，后续修改组件className后，PurgeCSS不会重新扫描，从而把新添加的类名误判为未使用而清除。

解决方案 #

方案1：仅在生产环境启用PurgeCSS（推荐） #

修改postcss.config.js，根据Node环境变量决定是否加载PurgeCSS插件，开发环境下完全跳过PurgeCSS，避免样式被误清：

module.exports = {
  plugins: [
    // 仅在生产环境加载PurgeCSS
    process.env.NODE_ENV === 'production' ? [
      '@fullhuman/postcss-purgecss',
      {
        content: [
          './src/pages/**/*.{js,jsx,ts,tsx}',
          './src/pages/*.{js,jsx,ts,tsx}',
          './src/components/**/*.{js,jsx,ts,tsx}',
          './src/containers/**/*.{js,jsx,ts,tsx}',
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ['html', 'body'],
      },
    ] : false,
    'postcss-preset-env',
  ].filter(Boolean), // 过滤掉false值，避免加载无效插件
};

方案2：完全禁用PurgeCSS #

如果暂时不需要PurgeCSS的功能，直接从postcss.config.js中移除PurgeCSS插件配置即可：

module.exports = {
  plugins: [
    'postcss-preset-env',
  ],
};

同时可选择卸载相关依赖：

npm uninstall @fullhuman/postcss-purgecss next-purge-css-modules

额外说明 #

使用全局SCSS时，开发环境下保持完整样式是合理的，PurgeCSS的核心价值本就是在生产构建时移除未使用的样式以优化体积，因此仅在生产环境启用是最佳实践。

内容的提问来源于stack exchange，提问作者Gergő Horváth