postcss-custom-properties 默认不生效，因 preserve: true 保留 var() 导致 IE 静默丢弃整条声明；必须设 preserve: false 且插件置于 autoprefixer 前，变量须定义在 :root 中、值为静态常量，并人工验证输出无残留 var()。
PostCSS 本身不处理 CSS 变量，必须靠 postcss-custom-properties 插件在构建时静态替换，且默认配置下根本不会生效——它默认保留 var() 行，IE 会直接跳过整条声明。
为什么 postcss-custom-properties 默认不 work
插件默认行为是生成双声明：background: #007bff; background: var(--primary);。这看似稳妥，但 IE11 及更早版本遇到无法识别的 var() 会静默丢弃整条 background 声明，最终取父级或初始值（比如 background: transparent），按钮变透明、文字变黑、布局塌陷都是常态。
真正起效的前提只有一个：preserve: false。它强制插件移除所有 var() 调用，只留下降级后的静态值。
- Webpack/Vite 项目中，
postcss-custom-properties必须放在autoprefixer之前，否则 autoprefixer 可能干扰属性顺序或压缩逻辑 - 若同时引入
css-vars-ponyfill运行时方案，二者冲突：ponyfill 依赖原始var()存在，而preserve: false把它删光了 - 变量定义必须在同一个 CSS 文件中，且优先出现在使用位置之前；跨文件、JS 注入、
@import引入的变量均不可见
:root 是唯一安全的变量作用域
插件只解析 :root 下定义的变量，其他位置如 .card { --pad: 1rem; } 或媒体查询内定义的 :root { --gap: 16px; } 默认不处理——它不分析 DOM 结构，也不回溯解析 @media 块外的上下文。
立即学习“前端免费学习笔记（深入）”；
值也必须是静态常量：--color: red; ✅，--size: calc(1rem + 2px); ❌，--c: var(--base); ❌，--bg: linear-gradient(...); ❌。
- 局部变量若真需降级，得显式配置
importFrom指向对应文件，但维护成本高，不推荐 - CSS Modules 类名哈希后，
:root外的变量基本无法被插件捕获，全局变量务必收口到:root - 媒体查询内的变量建议提至顶层
:root，并用 JS 或构建时条件变量区分不同断点值
构建后必须人工验证输出 CSS 是否干净
跑完构建，打开产出的 .css 文件，全局搜索 var(--。只要还有残留，说明要么变量定义位置不对，要么值含动态表达式，要么插件根本没生效。
- 别信 “已配置插件” 就万事大吉；检查
postcss.config.js中插件是否被filter(Boolean)过滤掉（常见于环境判断逻辑） - 若用了
cssnano，确认discardDuplicates: false，否则两行同名属性（如color: #333; color: var(--text);）可能被误删 -
calc(100% - var(--gap))这类写法在 IE 中不是 “var()不生效”，而是整个calc()被判为无效值，必须手动拆解为width: 90%;等静态值
@supports 和 no-cssvars 类才是真实兜底
@supports (color: var(--x)) 在 IE11 中不被识别，整条规则被忽略，不能单独用于降级。它只适合现代浏览器的增强逻辑。
JS 检测必须用 CSS.supports('color', 'var(--_)')，而非 CSS.supports('--_')（后者在 IE 报 TypeError）。
- 最可靠方式：
<script>if (!CSS.supports('color', 'var(--t)')) document.documentElement.classList.add('no-cssvars');</script> - CSS 中写两套：
.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; } - 千万别用覆盖写法：
background: #007bff; background: var(--primary);—— IE 会把第二行当无效，然后回退到父级background，结果不可控
真正的难点不在配置插件，而在约束变量定义方式、拆解动态表达式、以及确保构建链路每个环节都不悄悄“加回来”一个 var()。
