Brunch生产环境仍生成CSS SourceMap 不符合默认行为问题咨询

嘿，我碰到过类似的情况，咱们来一步步搞定这个问题！你提到按照Brunch文档的说法，生产环境（执行brunch build --production）默认应该不生成CSS SourceMap，但实际输出的文件还是带了SourceMap。结合你的配置来看，问题大概率出在postcss-brunch插件的默认行为上——它没有自动继承Brunch的全局SourceMap开关，得咱们手动配置来覆盖。

第一步：修改brunch-config.js，明确控制SourceMap生成 #

更新你的brunch-config.js文件，添加plugins配置段，针对postcss-brunch设置跟随环境的SourceMap开关：

module.exports = {
  files: {
    stylesheets: { joinTo: 'app.css' }
  },
  plugins: {
    postcss: {
      // 只有在开发环境才生成SourceMap
      sourceMap: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
    }
  },
  // 可选：全局明确指定生产环境关闭SourceMap（虽然是默认，但加上更保险）
  sourceMaps: process.env.NODE_ENV !== 'production'
};

第二步：验证生产环境构建 #

执行你的生产构建命令就行，Brunch在--production模式下会自动设置NODE_ENV=production，上面的配置会让postcss插件自动关闭SourceMap：

npm run prod

为什么会出现这个问题？ #

Brunch的全局sourceMaps选项默认在生产环境是false，但postcss-brunch插件的默认sourceMap设置是true——它不会自动读取Brunch的全局配置，所以不管你是不是生产环境，它都会强制生成SourceMap。咱们手动把插件的sourceMap选项和环境变量绑定，就能解决这个冲突。

如果担心环境变量没生效，还可以直接在package.json的生产脚本里显式指定：

{
  "name": "test",
  "version": "1.0.0",
  "scripts": {
    "start": "brunch watch --server",
    "prod": "NODE_ENV=production rm -rf public/ && brunch build --production"
  },
  "devDependencies": {
    "brunch": "^2.10.12",
    "cssnano": "^3.10.0",
    "postcss-brunch": "^2.1.0"
  }
}

这样不管系统环境如何，生产构建都会明确使用production环境变量，确保SourceMap被关闭。

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