Laravel Mix如何将CSS输出样式配置应用到生产构建？

我帮你梳理下问题根源，然后给出具体的解决步骤：

问题核心原因 #

在Laravel Mix 5.0.4版本中，生产构建（npm run production）会默认执行两个操作，导致你的配置失效：

1. 强制将node-sass的outputStyle设置为compressed，直接覆盖你在sass()方法里的配置；
2. 启用cssnano进行CSS优化，其中的mergeRules功能会自动合并带有相同样式声明的选择器，这就是你看到.selector-1和.selector-2的color: red被合并的原因，而这种合并直接破坏了CSS自定义属性（变量）的作用域逻辑。

解决方案 #

你需要在webpack.mix.js中添加Mix选项配置，同时保留原有的sass编译设置，具体代码如下：

mix.js('resources/js/app.js', 'public/js')
 .sass('resources/sass/app.scss', 'public/css', { 
   outputStyle: 'expanded' // 保留开发环境的格式配置
 })
 .copy(`resources/images`, `public/images`, false);

// 配置生产环境的CSS处理规则
mix.options({
  cssNano: {
    preset: ['default', {
      mergeRules: false, // 关键：关闭选择器合并，解决CSS变量作用域问题
      discardComments: { removeAll: true }, // 可选：移除所有注释（按需开启）
      // 若需要完全保持expanded格式不压缩，添加以下额外选项
      compress: false,
      minifySelectors: false,
      reduceIdents: false,
      discardUnused: false
    }]
  }
});

额外说明 #

• 如果你的核心需求只是解决CSS变量的作用域问题，不需要完全禁用CSS压缩，只需要关闭mergeRules即可，cssnano的其他优化（比如移除注释、精简空格）可以正常保留；
• 如果你希望生产环境的CSS完全和开发环境一致（无压缩、无规则合并），可以直接禁用cssnano：

  mix.options({
    cssNano: false
  });
  

  不过这种方式会丢失cssnano的其他实用优化，建议仅在必要时使用。

验证效果 #

运行npm run production后，查看public/css/app.css文件：

• 样式格式会保持expanded（展开式）；
• 不会再出现合并相同声明选择器的情况；
• CSS自定义属性的作用域恢复正常，元素会继承正确的颜色值。

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