必须设preserve: false，否则ie11及更早版本会静默丢弃含var(--x)的整条css声明；变量须定义在:root、为静态常量，calc()内嵌套var()需手动拆解，兜底推荐no-cssvars类而非@supports。
postcss-custom-properties 默认不降级，必须显式配置 preserve: false 才能让 IE11 及更早版本真正读到样式 —— 否则整条声明被静默丢弃，不是颜色不对，是压根没生效。
为什么 var(--x) 在 IE11 里完全失效
IE11 不解析 var(--x) 语法，遇到含该语法的整条 CSS 声明（如 background: var(--primary)）会直接跳过，等效于该行不存在。你看到的透明背景、塌陷布局、文字变黑，不是 fallback 没起作用，而是浏览器根本没执行这行。
靠 var(--x, #fff) 或 @supports (background: var(--x)) 都无效：@supports 在 IE 中本身不被识别，会整块规则忽略；var(--x, #fff) 的后备值只在现代浏览器中生效，IE 连 var() 都不认识，更不会解析第二个参数。
-
postcss-custom-properties默认行为是追加降级值（如color: #007bff; color: var(--primary)），IE 看到第二行就停，最终取initial或继承值 - 只有设
preserve: false，插件才会删掉var()调用，只保留静态值 - 若同时用了
css-vars-ponyfill，它依赖原始var()存在才能运行时替换 —— 此时必须配preserve: true，但 IE 下会双失效（PostCSS 没删，ponyfill 又因作用域/定义缺失而跳过）
postcss-custom-properties 必须满足的三个静态前提
插件在构建时工作，无法读取 JS 动态设置的变量，也无法跨文件回溯解析。能被降级的变量必须满足：
- 定义在
:root最稳妥；局部定义如.card { --pad: 1rem; }默认不处理，除非显式配置importFrom指向该文件 - 值只能是静态常量：
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被解析，建议提至顶层
Webpack/Vite 项目中，还要确保插件顺序在 autoprefixer 之前，否则可能被后续处理干扰或覆盖。
calc() 里嵌套 var() 怎么办
width: calc(100% - var(--gap)) 这种写法在 IE11 中不是 “var() 不生效”，而是整个 calc() 表达式被 parser 直接跳过 —— 因为 IE11 根本不支持 var()，也就无法解析其所在上下文。
-
postcss-custom-properties默认不处理calc()内的var()，因为无法安全求值 - 不要指望
postcss-calc和postcss-custom-properties链式配合就能自动替换 —— 顺序错或配置漏，结果仍是空值 - 稳妥做法：把纯数值变量（如
--gap: 12px）直接写成width: calc(100% - 12px) - 如果
--gap需动态变更，就得改用 JS 注入内联样式，或放弃 IE11 支持
兜底 class 比 @supports 更可靠
@supports (background: var(--x)) 在 IE 中会报 TypeError，因为它根本不认识这个规则语法。不能单独依赖它做降级。
- 正确做法是前置静态值、后置
var()覆盖：background: #007bff; background: var(--primary);，顺序不能颠倒 - JS 检测应使用
CSS.supports('color', 'var(--_)')，而非CSS.supports('--theme')（后者在 IE 报错） - 给
加no-cssvars类最可靠：<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script>再写.no-cssvars .btn { background: #007bff; }
真正容易被忽略的是：构建后必须手动检查输出 CSS 文件，搜索 var(-- —— 如果还有残留，说明变量定义位置不对、值含动态表达式，或 PostCSS 插件根本没加载成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
