css-vars-ponyfill是ie11最可靠的运行时方案，但必须满足三前提：css加载完毕后执行、变量定义在:root、禁用watch并启用onlyvars:true，否则整条规则被静默丢弃。
css-vars-ponyfill 是目前最可靠、可落地的运行时方案，但直接 import 后调用 cssVars() 几乎必然失败——问题不在库本身，而在初始化时机、变量作用域和 IE11 的解析规则上。
为什么 cssVars() 在 IE11 里完全没反应
IE11 对 var(--x) 不是“显示错”，而是整条 CSS 规则被丢弃。比如 .btn { color: var(--primary); } 在 IE11 中等效于 .btn { }，连默认颜色都不会继承。这不是样式覆盖问题，是语法级不识别。
常见失效原因：
-
:root外定义变量（如.card { --pad: 1rem; }）→css-vars-ponyfill默认跳过，只扫描:root和:host - CSS 文件尚未加载完成就执行
cssVars()→ 扫描不到任何--*声明 - 使用 Webpack + CSS Modules → 类名哈希化后，
var(--x)所在的选择器无法与:root变量关联 - 动态设置变量（
document.documentElement.style.setProperty('--color', 'red')）但未传watch: false→ IE11 不支持DOMSubtreeModified，开启watch会静默失败
必须满足的三个初始化前提
缺一不可，否则 polyfill 形同虚设：
- 确保所有 CSS 已加载：用
window.addEventListener('load', () => cssVars({...}))，不要在里同步调用 - 变量必须定义在
:root下：:root { --primary: #007bff; --gap: 8px; }，不能嵌套、不能组件级作用域 - 显式禁用 watch 并启用
onlyVars: true：cssVars({ onlyVars: true, watch: false })—— 减少 IE11 下遍历全部 CSS 规则的开销，且避免监听失效
calc() + var() 在 IE11 中的双重失效
即使 css-vars-ponyfill 把 calc(100% - var(--gap)) 替换为 calc(100% - 8px)，IE11 仍可能拒绝该声明：它对 calc() 支持极弱，不允许空格外的任意字符，也不接受单位混写以外的复杂表达式。
安全做法：
- 构建时降级：用
postcss-custom-properties在打包阶段展开变量，而非依赖运行时 - 若必须运行时处理，配合
onBeforeSend钩子手动改写：onBeforeSend: (css) => css.replace(/calc\(([^)]+)\)/g, (_, exp) => exp.includes('var(') ? `calc(${exp.replace(/var\(--(\w+)\)/g, (_, k) => getStaticVar(k))})` : _)，但前提是变量值必须是静态数字+单位（如--gap: 8px），不能是em或计算结果 - 媒体查询中禁用变量：
@media (min-width: var(--sm))→ IE11 直接跳过整条@media，必须写死@media (min-width: 576px)
动态更新变量时如何触发重计算
IE11 下不能靠 watch: true 自动响应，必须手动触发：
- 修改变量后，调用
cssVars({ variables: { '--color': 'red' } })，传入当前全部变量键值对（不是增量） - 如果变量来自 JS 状态（如主题切换），建议维护一个全局变量对象，在每次变更时全量传入，避免遗漏
- 避免在
requestAnimationFrame中高频调用；IE11 下样式重排成本高，建议节流或合并变更
真正麻烦的从来不是“能不能加 polyfill”，而是变量是否真的只存在于 :root、是否所有 CSS 已加载、以及 calc() 和媒体查询里有没有偷偷藏了 var() —— 这些地方一旦漏掉，IE11 就会静默丢弃整条规则，连控制台都不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
