ie11 不解析 var(--x) 语法，会静默跳过整行 css 声明；postcss-custom-properties 必须设 preserve: false 才能删除含 var() 的行，仅保留静态值。
IE11 里 var(--x) 直接消失，不是颜色没变而是整条样式失效
IE11 及更早版本根本不解析 var(--x) 语法，遇到含该函数的声明（如 color: var(--text);）会静默跳过整行，等效于这条 CSS 从未存在。这不是“降级失败”，是声明被丢弃——按钮背景变透明、文字继承黑色、边框消失都属此因。var(--x, #fff) 在 IE 中同样无效，它连括号里的内容都不会去读。
postcss-custom-properties 必须设 preserve: false
默认配置下插件只追加降级值，生成类似：
background: #007bff; background: var(--primary);
IE 看到第二行就跳过，最终取初始值（background 变成 transparent）。只有显式设置 preserve: false 才会删掉含 var() 的行，只保留静态值。
-
preserve: true或不写 → 构建后仍有var(--x)，IE 依旧失效 - Webpack/Vite 中需确保插件在
autoprefixer之前执行，否则可能被覆盖 - 若同时用
css-vars-ponyfill，它依赖原始var()存在；此时必须配preserve: true，但 IE 下会双失效——PostCSS 没删掉var()，ponyfill 又因变量未定义而跳过
变量必须定义在 :root 且值为纯常量
PostCSS 插件是编译期工具，无法读取 JS 动态设置、跨文件定义、或运行时计算的值。能被降级的变量必须满足：
- 声明位置：
:root最稳妥；.card { --pad: 1rem; }这类局部定义默认不处理，除非显式配importFrom指向该文件 - 值类型：
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，建议提至顶层
兜底必须用前置静态值 + no-cssvars 类，别信 @supports
@supports (background: var(--x)) 在 IE 中本身不被识别，整条规则被忽略，起不到降级作用。正确做法是：
- 静态值写在前面：
background: #007bff; background: var(--primary);—— IE 用第一行，现代浏览器覆盖第二行 - 复合属性（
background、border）不能只写一个后备，必须拆成原子属性：background-color: #fff; background-color: var(--bg);+background-image: url(...); - JS 检测应使用
CSS.supports('color', 'var(--_)')（不是CSS.supports('--theme')），给加no-cssvars类最可靠
构建后务必打开产出的 CSS 文件全局搜索 var(--，只要还有残留，说明变量定义跨文件、值含 calc()、或 JS 动态注入——这些 PostCSS 都看不见，只能手动处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
