必须将postcss-custom-properties的preserve设为false，否则ie11会因识别不了var()而跳过整条css声明；变量须定义在:root且为静态常量，calc()内嵌套var()无效。
postcss-custom-properties 的 preserve 选项必须显式设为 false
默认情况下，postcss-custom-properties 不会移除原始的 var() 调用，只追加降级值。IE11 看到 color: var(--primary); 这一行就跳过整条声明，导致样式丢失——哪怕你写了 color: #007bff; 在前面也没用。
必须在插件配置中明确写：
module.exports = {
plugins: [
require('postcss-custom-properties')({
preserve: false
})
]
};
-
preserve: true（或不写）→ 新浏览器可用变量，旧浏览器仍失效 -
preserve: false→ 旧浏览器能用，但新浏览器失去动态能力（如 JS 修改变量、主题切换） - Webpack/Vite 中若用
postcss-loader，确保该配置被实际读取（可加console.log验证）
变量定义必须静态、同文件、作用域明确
PostCSS 插件在构建时运行，无法解析 JS 动态设置的变量，也读不到跨 @import 或不同 CSS 文件定义的变量。
- 定义必须放在
:root下最稳妥；局部作用域如.card { --pad: 1rem; }默认不处理 - 值必须是静态常量：
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - Webpack + CSS Modules 项目中，类名哈希会破坏作用域识别，建议所有降级变量统一收口到
:root
calc() 里嵌套 var() 在 IE11 完全不可用
width: calc(100% - var(--gap)) 这种写法，在 IE11 不是 “变量没生效”，而是整个 calc() 表达式被 parser 直接忽略——连基础数值都不会 fallback。
-
postcss-custom-properties默认不处理这种嵌套，因为无法安全求值 -
postcss-calc也不会自动链式替换未展开的var()，顺序错或漏配都白搭 - 稳妥做法：把
--gap: 12px这种纯数值变量，直接写成width: calc(100% - 12px) - 如果
gap必须动态，就得 JS 注入内联样式，或放弃 IE11 支持
别依赖 @supports 做兜底
@supports (background: var(--x)) 在 IE11 会直接抛 TypeError，因为它根本不认识 @supports 规则语法。
- 这个规则本身在 IE11 是无效 CSS，浏览器 parser 会直接跳过整段代码块
- 真正有效的降级方式是手动加 class：
.ie .button { background: #007bff; } - 配合 UA 检测脚本或构建时注入 class，比 CSS 规则更可控
关键点在于：变量降级不是“开关一开就全好”，它要求定义可静态求值、作用域清晰、避免嵌套计算，且必须主动关闭 preserve。任何一步松动，IE 里看到的都可能是透明背景或继承色——而不是你期望的颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
