Laravel Webpack Mix编译后CSS变量被移除问题如何解决？

核心触发原因 #

你遇到的自定义CSS变量被删除的问题，主要来自两个配置问题：

1. 你额外引入的postcss-css-variables插件默认会自动清理所有它判定为「未被使用」的自定义CSS变量
2. 第二个变量的SCSS插值写法错误，SCSS会把无引号的bada-bumm识别为SCSS变量，未定义的情况下会生成无效规则被后续流程清理

解决步骤 #

• 方案一（无需兼容IE等极旧浏览器优先用）：直接移除postcss-css-variables插件
  Laravel Mix自带的Sass编译本身就支持原生CSS变量的正确输出，不需要额外插件处理，直接删除options里的postCss配置即可，修改后的配置片段如下：

mix.js('resources/' + domain + '/js/app.js', 'public/' + mixPath + '/js')
    .vue()
    .sass('resources/' + domain + '/css/app.scss', 'public/' + mixPath + '/css')
    .copyDirectory('resources/' + domain + '/img/', 'public/' + mixPath + '/img');

同时修正SCSS文件的插值写法：

:root {
    background-color: #bada55;
    #{'--bada-boom'}: #bada55;
    --#{'bada-bumm'}: pink; /* 插值内容加引号，避免SCSS识别为自定义变量 */
}

• 方案二（需要保留postcss-css-variables做旧浏览器兼容）：修改插件配置关闭自动清理规则
  调整options配置，给postcss-css-variables加preserve参数，同时关闭cssnano的自动清理未使用规则逻辑，避免生产环境压缩时变量被删除：

.options({
    postCss: [
        require('postcss-css-variables')({
            preserve: true // 保留所有自定义CSS变量，不自动删除
        })
    ],
    cssNano: {
        preset: ['default', {
            discardUnused: false // 生产环境压缩时禁止删除未使用的CSS规则/变量
        }]
    }
})

同样需要同步修正SCSS文件的插值写法。

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