postcss-custom-properties 的 preserve 配置必须设为 false；默认仅追加降级值，IE11 会跳过含 var() 的整行，显式设 preserve: false 才删除变量只留静态值。
postcss-custom-properties 的 preserve 配置必须设为 false
默认配置下插件只追加降级值，生成类似 color: #007bff; color: var(--primary); 的双声明。IE11 遇到含 var() 的整行就静默跳过，最终样式用初始值（比如文字变黑、背景变透明）。只有显式设 preserve: false，插件才会真正删掉所有 var(--x) 行，只保留静态值。
常见误配：
-
preserve: true→ 保留变量供现代浏览器动态使用，但 IE 仍失效 - 不写
preserve或写成preserve: null→ 等同于false，但容易被忽略，建议显式声明 -
preserve: 'false'（字符串）→ 不生效，必须是布尔值
:root 中定义的变量必须是纯常量
PostCSS 是编译期工具，无法求值运行时表达式。能被替换的变量必须满足：
- 定义位置：仅
:root下最稳妥；.card { --pad: 1rem; }这类局部定义默认不处理 - 值类型：
--color: #007bff;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法回溯解析，应提至顶层
构建后务必打开产出 CSS 全局搜索 var(-- —— 只要还有残留，说明变量定义跨文件、值含 calc()，或 JS 动态注入，这些 PostCSS 都看不见。
立即学习“前端免费学习笔记（深入）”；
插件必须在 autoprefixer 之前执行
如果顺序颠倒，autoprefixer 可能覆盖或干扰变量替换结果。Webpack/Vite 中需确认 postcss.config.js 的插件数组顺序：
module.exports = {
plugins: [
'postcss-custom-properties', // 必须在 autoprefixer 前
'autoprefixer',
'cssnano'
]
}
同时用了 css-vars-ponyfill 的话要注意冲突：preserve: false 会让 ponyfill 找不到原始 var() 调用而跳过，此时必须改用 preserve: true，但 IE 下会双失效——PostCSS 没删变量，ponyfill 又因作用域或未定义而失败。
@supports 不是兼容方案，no-cssvars 类才是真实兜底
@supports (background: var(--x)) 在 IE 中本身不被识别，整条规则被忽略，起不到降级作用。正确做法是：
- JS 检测用
CSS.supports('color', 'var(--_)')（不是CSS.supports('--theme')） - 给
<html>加no-cssvars类：<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script> - 写两套样式：
.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; }
复合属性（如 background）不能只写一个后备，必须拆成原子属性：background-color: #fff; background-color: var(--bg); + background-image: url();。否则 IE 会丢弃整条声明。
