PostCSS需借助插件（如postcss-css-variables或postcss-custom-properties）将:root中定义的CSS变量静态替换为字面量值，仅支持纯字符串、数字或带单位常量，不支持calc()、动态计算或跨文件变量收集，且须手动处理IE回退及避免压缩工具误删重复声明。
PostCSS怎么把:root里的CSS变量转成静态值
不能直接“转换”，PostCSS本身不解析运行时变量，必须配合插件做静态替换。核心逻辑是：先收集所有:root中定义的--xxx变量及其值，再遍历所有用到var(--xxx)的地方，替换成对应值（仅限常量值，不支持表达式或计算）。
最常用的是postcss-css-variables，但它默认只处理顶层:root，且不支持嵌套作用域或calc()内联变量——这点容易误判为“没生效”。
- 确保
:root定义在CSS入口文件里，而不是被@import分散在多个文件中（插件默认不跨文件收集） - 变量值必须是纯字符串、数字或带单位的字面量，比如
--color: #333✔️，--size: calc(1em + 2px)❌（会被跳过） - 如果用了
postcss-import，需把它放在postcss-css-variables之前，否则变量定义无法提前聚合
为什么var(--color)替换成值后，IE下还是不显示
不是替换失败，而是生成的回退值没写对。PostCSS插件不会自动加fallback，它只做“有定义就替换”；而IE完全不认识var()，必须靠color: red; color: var(--color);这种写法，让IE读第一行，现代浏览器覆盖第二行。
postcss-css-variables默认不插入fallback，得手动开选项：
立即学习“前端免费学习笔记（深入）”；
postcssCssVariables({
preserve: false, // 不保留原始var()语句
silent: true,
// 必须显式启用fallback注入
variables: {
'--color': '#ff6b6b',
}
})
但注意：这个插件的fallback是“声明级注入”，即在每个含var()的属性前加一行同名属性，不是CSS原生的var(--x, red)语法降级。
- 如果你写了
var(--color, blue)，插件会忽略blue，因为它只认:root里定义的值，不解析var()第二个参数 - 真正兼容IE的写法只能是两行：上行给IE，下行给现代浏览器，顺序不能反
- 如果CSS压缩工具（如
cssnano）开了discardDuplicates，可能把重复的color声明删掉——要关掉这个选项
postcss-custom-properties和postcss-css-variables选哪个
前者更贴近W3C规范，支持var(--x, fallback)语法里的fallback提取，后者更轻、替换更激进。但两者都**不支持动态计算、不支持JS运行时更新、不支持媒体查询内变量重定义**。
关键差异在处理逻辑：
-
postcss-custom-properties：把var(--x, red)里的red当真fallback用，即使:root没定义--x也照常输出color: red -
postcss-css-variables：只认:root明确定义的变量，没定义就留着var(--x)原样不动（除非开了silent: false报错） - 前者对
@custom-media等新语法兼容更好，但体积略大；后者零依赖，适合极简构建链路
如果你项目里大量用var(--x, #999)这种写法，选postcss-custom-properties；如果变量全在:root集中管理，且不用fallback兜底，后者更稳。
变量值含rem或%单位时，替换后样式错乱
不是单位问题，是PostCSS插件把值当字符串原样替换，没做单位校验。比如--gap: 1.5rem → margin: var(--gap) → margin: 1.5rem，看起来没问题，但若原始值是--gap: calc(1rem + 4px)，插件直接丢弃，留下空白或原始var()，导致样式断裂。
更隐蔽的问题是缩放类场景：--scale: 1.2用在transform: scale(var(--scale))里，替换后变成transform: scale(1.2)，这本身合法；但如果变量值是--scale: 1.2x（多写了x），插件照样塞进去，结果就是无效声明。
- 所有变量值建议用
postcss-reporter或自定义脚本做预检，过滤掉含非法字符的值 - 避免在变量里写
calc()，改用构建时计算好再赋值（例如用postcss-simple-vars配合postcss-calc先算完） - 如果必须动态计算，别依赖PostCSS变量降级，改用CSS-in-JS或data-attribute驱动的JS方案
变量降级本质是静态文本替换，它不理解CSS语法层级，也不感知上下文。一旦值里混入运行时才有效的表达式，就超出了它的能力边界。
