postcss-custom-properties 必须设 preserve: false 才能彻底移除 var() 实现 ie 兼容；变量值仅支持静态字面量，calc() 和嵌套 var() 会被跳过；:root 定义须在入口文件内或确保 postcss-import 优先执行；需配合运行时 no-cssvars 类检测兜底。
postcss-custom-properties 必须设 preserve: false
默认情况下，postcss-custom-properties 会保留原始 var(--x) 声明，只添加 fallback —— 这对 IE 完全无效。必须显式关闭保留行为，否则生成的 CSS 里仍含 var()，旧浏览器直接忽略整条声明。
配置写法：
plugins: {<br> 'postcss-custom-properties': {<br> preserve: false<br> }<br>}
-
preserve: true（默认）→ 输出color: #333; color: var(--color);，IE 读第一行但现代浏览器覆盖第二行，看似兼容实则不可靠 -
preserve: false→ 输出color: #333;，彻底移除var()，IE 和所有旧浏览器都能执行 - 如果同时用了
postcss-preset-env，它的custom-properties配置项也需设preserve: false，否则内部调用的仍是同一套逻辑
变量值只能是静态字面量，calc() 和嵌套变量会被跳过
postcss-custom-properties 不解析运行时表达式，只做字符串替换。遇到 --size: calc(1em + 2px) 或 --bg: var(--color)，插件直接忽略该变量，对应 var(--size) 不会被替换，最终留在输出中 → IE 失效。
- ✅ 支持：
--color: #007bff、--gap: 12px、--radius: 4px - ❌ 不支持：
--offset: calc(1rem - 2px)、--link-color: var(--primary)、--shadow: 0 2px 4px rgba(0,0,0,0.1)（含函数） - 检查构建后 CSS：搜索
var(--，若仍有未替换项，优先查变量值是否含calc、var、rgb()等动态内容
:root 定义必须在入口 CSS 文件里，不能靠 @import 分散
插件默认只扫描当前文件的 :root 块，不会跨 @import 聚合变量定义。如果把 :root { --color: red; } 写在 vars.css 里，再用 @import "vars.css"; 引入，postcss-custom-properties 就找不到它。
- 正确做法：把所有全局变量集中写在主 CSS 入口文件顶部的
:root中 - 若必须拆分，确保
postcss-import插件排在postcss-custom-properties之前，让 import 合并后再处理变量 - 组件级变量（如
.card { --pad: 16px; }）会被作用域内替换，但无法被外部选择器引用 —— 这是设计使然，不是 bug
IE 兜底不能只靠 PostCSS，得配 no-cssvars 类或 @supports
PostCSS 替换后，IE 能读静态值，但你无法知道它是否真的支持 var()。万一用户禁用 JS，或检测逻辑出错，样式可能错乱。纯靠构建时替换是单点故障。
- 推荐加一层运行时检测：
if (!CSS.supports('color', 'var(--x)')) {<br> document.documentElement.classList.add('no-cssvars');<br>} - 对应写两套样式：
.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; } -
@supports not (background: var(--x))在 IE 中不生效（IE 不支持@supports），所以必须用 class 方案
真正容易被忽略的是变量作用域和构建时静态性之间的落差：你写的 var(--x) 在开发时看着灵活，但 PostCSS 只认死值、不跨文件、不执行计算。一旦变量来源变成 JS 动态设置，整套降级就失效了——那部分必须由 JS 自行回退，PostCSS 帮不上忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
