生产环境css压缩导致var()变量被误删，因旧版cssnano默认启用discardunused。解决方案：升级cssnano至v6.0.2并禁用discardunused，或改用原生支持css变量的csso；验证需检查压缩后文件是否保留var(--，并排除cdn二次压缩干扰。
生产环境CSS压缩后样式丢失，不是代码写错了，而是构建工具把含var()的声明当无效语法删掉了，浏览器解析时找不到变量引用导致样式失效。
确认是否因CSS压缩移除了var()
打开浏览器开发者工具→Network标签页→筛选css→找到加载的CSS文件→右键“Open in Sources”→搜索var(--；如果源码里有color: var(--primary);但压缩后变成color:#fff;或整行消失，说明压缩器不支持CSS变量。
旧版cssnano（v4及更早）默认启用discardUnused和mergeLonghand，会误判var()为未使用值直接剔除——这是Laravel Mix 6之前默认集成的版本。
检查webpack.mix.js中CSS压缩配置
打开webpack.mix.js，定位到.options({区块：
若存在processCssVariables: false或advanced: true且未显式禁用discardUnused，就极可能触发删除行为。
方法一：升级并锁定兼容版本
运行npm install cssnano@6.0.2 --save-dev，然后在.options({中强制指定：
postCss: [require('cssnano')({ preset: ['default', { discardUnused: false }] })]
方法二：绕过cssnano，改用csso
npm install csso --save-dev，再替换mix配置：
.options({ css: { plugins: [require('csso')()] } })
【csso v5+原生支持CSS变量，无需额外配置】
验证压缩结果是否保留var()声明
第一步：执行npm run production
第二步：进入public/css目录，用cat app.css | grep 'var(--'检查输出
第三步：若无返回，说明压缩阶段已丢失；若有返回但浏览器仍不生效，继续查HTTP响应头
注意：某些CDN或反向代理会二次压缩CSS，即使本地构建正确，上线后也可能被覆盖。临时关闭CDN缓存，直连服务器IP测试。
临时禁用压缩快速验证
在webpack.mix.js中将.sass()或.styles()链式调用末尾加上.disableNotifications().disableSuccessNotifications()，再加一行.options({ css: { safe: true } })；
运行npm run dev，查看public/css/app.css是否完整保留var()；
如果此时样式正常，问题100%锁定在压缩环节，无需再查路径或服务器配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
