ie11及更早版本完全不解析var(--x)，整条css声明被静默丢弃，导致样式丢失而非降级；必须通过postcss-custom-properties设preserve:false彻底移除var()并仅保留静态值，且变量须定义在:root、为纯常量。
IE直接忽略var(--x)整条声明，不是降级而是样式丢失
IE11及更早版本根本不会解析var()函数，遇到color: var(--primary);就当这条声明不存在，等效于.btn { }。它不报错、不警告，只静默丢弃——结果可能是文字变黑、背景变透明、按钮消失。靠var(--x, #fff)写 fallback 没用，因为 IE 连括号里的内容都不读。
postcss-custom-properties必须设preserve: false
默认配置下，这个插件只是追加一行静态值，比如把color: var(--c);编译成：
color: #007bff; color: var(--c);
IE 会跳过第二行，最终取继承色或initial（color常为黑色，background为透明）。只有显式设置preserve: false，插件才会删掉含var()的行，只留color: #007bff;。
-
preserve: true或不配该选项 → 构建后仍有var()→ IE 失效 - Webpack/Vite 中，
postcss-custom-properties必须在autoprefixer之前，否则可能被覆盖 - 如果同时用了
css-vars-ponyfill，它依赖原始var()存在；此时配preserve: false会让 ponyfill 失效，得换方案
变量定义必须满足三个硬条件
PostCSS 插件只处理构建时能静态求值的变量，以下情况它一律跳过：
- 变量没定义在
:root里，比如写在.card { --pad: 1rem; }中 → 插件不提取 - 变量值含
calc()或嵌套var()，如--text: rgb(var(--r), var(--g), var(--b));→ 不解析函数体内 - 变量来自 JS 动态设置：
el.style.setProperty('--color', 'red')→ 构建时不可见，无法替换
推荐做法：所有主题变量集中写在:root，值为纯字符串或数字，例如--primary: #007bff;，再通过importFrom从 JSON 文件统一管理。
复合属性和媒体查询里不能用var()
像background: var(--bg) url(img.png);这种写法，IE 会整条丢弃，背景变成transparent；@media (min-width: var(--bp))则直接让整个媒体查询失效。
真正安全的做法是：
- 拆开写：先用
var()设单值变量，再组合进属性（如--gap: 8;→margin: calc(var(--gap) * 1px);） - 媒体查询断点改用固定值，或用
no-cssvars类做 JS 特征检测后切换样式 - 避免在
font、clip-path等复杂属性中混用var()，IE 解析器容易直接放弃整条规则
最易被忽略的是：变量作用域和构建时机——你写的var()是否真能在 PostCSS 运行时被看见，比语法本身更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
