IE11及更早版本将var(--x)视为无效语法直接跳过，导致样式失效；需用postcss-custom-properties（preserve: false）编译并确保变量定义在:root且为纯常量，动态值、嵌套引用及@media中使用均不支持。
IE11 及更早版本根本不认识 var(--x)，不是“不兼容”，是直接当无效语法跳过整条声明——color: var(--text); 在 IE 里等价于 color: ;，结果回退到继承值或初始值，可能造成按钮消失、背景透明、布局塌陷。
postcss-custom-properties 的 preserve: false 必须显式设置
默认配置下插件只做“追加”，比如把 color: var(--c); 编译成 color: #007bff; color: var(--c);。IE 看到第二行就跳过，最终还是用回退值。
-
preserve: false才会删掉var(--c)行，只留color: #007bff; - 漏配或写成
preserve: true，构建后 CSS 里仍有var(--x)，IE 依旧白屏 - Webpack/Vite 中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前
:root 是唯一稳妥的变量定义位置
插件只处理构建时静态可求值的定义，动态、跨文件、嵌套表达式一律跳过。
- ✅ 定义必须在
:root（最稳妥），或通过@import明确引入的同一文件内 - ✅ 值只能是纯常量：
--color: red;、--gap: 12px; - ❌
--size: calc(1rem + 2px);、--c: var(--base);、--bg: linear-gradient();全部无法替换 - ❌
width: calc(100% - var(--gap));—— IE 直接跳过整个calc()，PostCSS 默认也不处理这种嵌套
css-vars-ponyfill 在 IE 中只读 :root，且 watch: false 才可靠
它不修改原始 CSS，而是在 DOM 加载后扫描 style 标签和 link[rel="stylesheet"]，提取 :root 中定义的变量，再把 var(--x) 替换成计算后的值，以内联样式注入。
立即学习“前端免费学习笔记（深入）”；
- 变量定义在组件级作用域（如
.card { --pad: 1rem; }）会被忽略——必须显式写在:root里 -
watch: true依赖DOMSubtreeModified，IE11 不支持，实际退化为单次执行；应设为false - JS 动态设置变量（
el.style.setProperty('--x', 'red')）后，需手动调用cssVars({ variables: { '--x': 'red' } }) - 媒体查询中引用变量（
@media (min-width: var(--sm))）IE 直接跳过整条规则，ponyfill 也无能为力
no-cssvars 类比 @supports 更实在
@supports (color: var(--x)) 在 IE11 里不执行（IE11 不支持 @supports），不能单独依赖它做降级。
- 真正有效的兜底是手动加 class：
<html class="no-cssvars">，然后写.no-cssvars .btn { background: #007bff; } - Fallback 值必须是合法 CSS 值，不能是另一个
var()（IE 连嵌套语法都不识别） - 构建后必须人工验证 CSS 输出是否干净：全局搜索
var(--，如果还有残留，说明变量定义位置不对、值含动态表达式、或插件没生效
最容易被忽略的是：CSS 变量不能用于 @media、@keyframes 等语法层规则，哪怕 PostCSS 也无能为力——这类场景只能用预处理器变量或 JS 控制 class 切换。
