如何避免SCSS压缩后CSS自定义属性值被破坏

SCSS本身不破坏var()，问题出在后续压缩工具错误解析；必须选用支持CSS变量的工具（如配置禁用mergeLonghand和discardUnused的cssnano），避免使用已知不兼容的旧版minifier。

直接结论：SCSS 本身不处理 var() 值的破坏，问题出在后续压缩工具（如 clean-css、旧版 cssnano 或 Laravel 自带的 PHP minifier）错误解析或丢弃 var(--x) 语法。关键不是“关掉压缩”，而是选对工具并禁用特定压缩规则。

为什么 var() 值会被删或变形？

常见现象包括：color: var(--primary); 变成 color: ;，或 margin: var(--space-md) 0; 被简化为 margin: 0;，甚至整个声明块消失。

根本原因不是 SCSS 编译，而是压缩器把 var() 当作无效函数或未识别语法，尤其当它：

1. 启用 mergeLonghand（如 cssnano 默认开启），把 margin-top: var(--space-sm); margin-right: 0; 错误合并为 margin: var(--space-sm) 0 0 0;，再因解析失败清空
2. 启用 discardUnused，误判 :root 中定义的 --xxx 为“未使用”而删掉整段
3. 使用已废弃的 [email protected] 或 matthiasmullie/[email protected]，它们压根不支持 CSS Custom Properties

用 cssnano 时必须关掉这两个选项

如果你走的是 Sass → PostCSS → cssnano 流程（推荐），cssnano 是目前最稳妥的选择，但默认配置会破坏 var()。

必须显式禁用：

1. mergeLonghand: false —— 避免把含 var() 的单属性强行合并成简写形式
2. discardUnused: false —— 确保 :root { --color: red; } 不被当作死代码删掉

示例配置（postcss.config.js）：

module.exports = {plugins: [require('cssnano')({preset: ['default', {mergeLonghand: false,discardUnused: false,}],}),],};

Laravel 项目里慎用 matthiasmullie/minify

虽然文档说“支持 CSS 变量”，但实际测试中，matthiasmullie/[email protected]（当前最新）仍会把 var(--x) 解析为空值，尤其在嵌套或 calc() 混用场景下（如 width: calc(100% - var(--gap));）。

替代方案更可靠：

1. 前端构建阶段用 postcss + cssnano 处理，Laravel 只负责加载已压缩好的 .min.css
2. 若必须后端压缩，改用 spatie/css-minifier（基于现代 CSS parser，明确声明兼容 var() 和 @layer）
3. 完全避开 PHP 压缩，让 Nginx 或 Cloudflare 在传输层做 Gzip/Brotli，更安全

SCSS 层也要防一手：别在 @include 里动态拼 var()

这不是压缩问题，但会放大风险。例如：

@mixin set-color($prop, $var) {#{$prop}: var(#{$var});}@include set-color(color, '--text-primary');

这种写法会让压缩器更难静态分析 var() 是否有效，部分工具直接跳过整条声明。

更稳妥写法是直接写死属性名+变量名：

.btn {color: var(--text-primary);}

或者用 @use 引入变量文件后，用 meta.load-css 控制注入时机，避免运行时插值干扰压缩流程。

真正容易被忽略的点：即使你用了 cssnano 并关了 mergeLonghand，如果 SCSS 编译输出时用了 outputStyle: 'compressed'，某些老版本 sass（如 Dart Sass var(--x) 里的空格删掉（var(--x) → var(--x) 没问题，但 var( --x ) → var(--x) 可能触发解析异常）。所以建议开发期用 expanded，压缩交给 postcss，别让两道压缩叠在一起。