执行npm run prod时输出错误：Laravel Mix编译Sass变量异常

看起来你遇到的问题是开发模式（npm run dev）编译正常，但生产模式（npm run prod）编译CSS变量时出错——这种情况大多和Laravel Mix在生产环境默认启用的CSS压缩优化逻辑有关，下面是具体的排查和解决步骤：

1. 先检查依赖变量是否存在 #

你的代码里--sg-card-produto-hover-border-color引用了var(--sg-cor-botao)，首先要确认这个被引用的变量已经在:root选择器里提前定义了。生产模式下的CSS优化工具会更严格，若引用了未定义的变量，可能触发报错或异常处理。

正确的:root结构应该是这样的（确保--sg-cor-botao在引用前定义）：

:root {
    /* 先定义被依赖的变量 */
    --sg-cor-botao: #你的按钮颜色值;
    /* 你的其他变量 */
    --sg-card-produto-hover-bg: #c3c3c3;
    --sg-card-produto-hover-box-shadow: 0 0 15px rgba(0, 0, 0, .8);
    --sg-card-produto-hover-border-width: 2px;
    --sg-card-produto-hover-border-style: solid;
    --sg-card-produto-hover-border-color: var(--sg-cor-botao);
}

2. 调整Laravel Mix的CSS压缩配置 #

Laravel Mix在生产模式默认使用cssnano做CSS压缩，而默认的cssnano预设可能会对CSS变量做一些“过度优化”（比如尝试压缩未识别的变量、移除被判定为“未使用”的变量），导致编译报错。

你可以在webpack.mix.js里自定义cssnano的配置，禁用这些可能影响CSS变量的优化项：

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        cssNano: {
            preset: ['default', {
                discardUnused: false, // 禁止移除被判定为未使用的变量
                reduceVars: false,    // 禁用CSS变量压缩
                mergeRules: false     // 禁止合并CSS规则，避免变量引用混乱
            }]
        }
    });

3. 排查依赖版本问题 #

旧版本的laravel-mix、cssnano或postcss可能对CSS变量的支持不完善，尝试更新相关依赖：

npm update laravel-mix cssnano postcss autoprefixer

更新完成后，清理缓存再重新编译：

npm run clean && npm run prod

4. 临时禁用CSS压缩验证问题 #

如果上面的方法都没解决，可以先临时禁用生产模式下的CSS压缩，确认是否是压缩逻辑导致的问题：

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        cssNano: false
    });

如果此时npm run prod能正常编译，就可以确定是cssnano的配置问题，再回到步骤2调整具体的优化项即可。

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