必须用 postcss-custom-properties 构建时静态替换，且 preserve: false 是硬性要求；否则 IE11 会静默丢弃整行 CSS。默认配置仅追加降级值（如 background: #007bff; background: var(--primary)），IE11 解析到第二行即跳过，取初始值；仅 preserve: false 才删除 var() 行，只留静态值。
直接结论：必须用 postcss-custom-properties 在构建时静态替换，且 preserve: false 是硬性要求；否则 IE11 会静默丢弃整行 CSS，不是颜色没变，而是样式彻底消失。
为什么 preserve: false 不可省略
默认配置下插件只追加降级值，生成类似：
background: #007bff; background: var(--primary);
IE11 解析到第二行就跳过，最终取初始值（background 变成 transparent）。只有显式设 preserve: false 才会删掉含 var() 的行，只保留第一行静态值。
-
preserve: true→ 保留var()行，现代浏览器可用，旧浏览器全失效 -
preserve: false→ 彻底删除所有含var()的声明，旧浏览器能用，但 JS 动态改变量无效 - 不写或写成
null→ 默认等同false，但易误判，务必显式声明
变量定义必须满足三个静态前提
postcss-custom-properties 是编译期工具，无法读取运行时逻辑。它只处理“一眼能看清”的定义：
- 声明位置：必须在
:root下，或通过importFrom显式指向局部定义文件（如.card { --pad: 1rem; }默认不处理） - 值类型：只能是纯常量，
--gap: 12px✅，--size: calc(1rem + 2px)❌，--c: var(--base)❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，一律提至顶层
别信 @supports 能兜底
@supports (background: var(--x)) 在 IE 中本身不被识别，整条规则被忽略，起不到降级作用。正确做法是：
- 静态值必须写在前面：
background-color: #007bff; background-color: var(--primary); - 复合属性要拆成原子属性：
background-color: #fff; background-color: var(--bg); background-image: url(); - JS 检测应使用
CSS.supports('color', 'var(--_)')（不是CSS.supports('--theme')），给加no-cssvars类最可靠
构建后必须人工验证输出
运行构建后，打开产出的 CSS 文件全局搜索 var(-- —— 只要还有残留，说明：
- 变量未在当前作用域定义（比如用了
var(--color)但没在:root或父级声明） - 变量值含
calc()、嵌套var()、或 JS 动态注入（插件完全无感知） - PostCSS 配置未加载，或插件顺序错误（
postcss-custom-properties必须在autoprefixer之前执行）
最容易被忽略的是：变量定义跨了 SCSS 文件，或值里混了 calc()，而你根本没意识到这些写法会让降级彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
