Next.js应用条件配置PostCSS插件避免npm run dev运行报错方案问询

报错本质是PostCSS不允许加载空的插件配置数组，可将通用插件和生产专属插件拆分，再按环境动态拼接，既不会出现空配置，也能保证开发环境的编译效率：

优化后配置代码 #

// 提前定义所有环境通用的插件列表
const commonPlugins = [
  "postcss-flexbugs-fixes",
  [
    "postcss-preset-env",
    {
      autoprefixer: { flexbox: "no-2009" },
      stage: 3,
      features: { "custom-properties": false }
    }
  ]
]

// 定义仅生产环境启用的插件
const productionPlugins = [
  [
    "@fullhuman/postcss-purgecss",
    {
      content: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: ["html", "body"]
    }
  ]
]

// 按环境动态拼接插件数组，避免出现空数组
module.exports = {
  plugins: isProduction ? [...commonPlugins, ...productionPlugins] : commonPlugins
}

方案说明 #

• 从根源避免开发环境返回空插件数组的情况，直接解决报错
• 插件按使用场景分类，后续调整规则时不需要修改条件判断逻辑
• postcss-flexbugs-fixes和postcss-preset-env在开发环境也启用，可以保证开发和生产环境的样式表现一致性，避免出现开发环境正常、生产环境样式错位的问题
• 注意确保配置顶部已正确定义isProduction变量，一般可以通过const isProduction = process.env.NODE_ENV === 'production'获取

如果确实需要在开发环境完全不启用任何PostCSS插件，可返回plugins: [require('postcss-noop')]（该插件无任何操作，仅用来占位避免空数组报错），但更推荐上述保留通用插件的方案。

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