css-vars-ponyfill在ie11中仅支持:root定义的静态css变量，不处理组件级作用域、嵌套变量或calc()混合表达式；需禁用watch、确保执行时机晚于css加载，并配合postcss构建时降级（preserve:false）分层使用。
css-vars-ponyfill 能让 IE11 显示 CSS 变量，但不是“开箱即用”——它只处理 :root 里定义的静态变量，且默认不扫描组件级作用域、不支持嵌套或 calc() 混合表达式。直接引入后没效果，大概率是变量源没被它看到。
变量必须定义在 :root 里，不能写在组件选择器中
IE 下 css-vars-ponyfill 默认只读取 :root 声明块里的 --* 变量。如果你把变量写在 .card { --pad: 1rem; } 或 Vue 的 <style scoped></style> 里，插件根本不会识别。
- ✅ 正确写法：
:root { --primary: #007bff; --gap: 8px; } - ❌ 错误写法：
.btn { --color: red; }或:host { --size: 24px; } - Webpack + CSS Modules 项目中，类名哈希化会破坏作用域关联，必须改用全局
:root定义
watch: true 在 IE11 中实际无效，应设为 false
css-vars-ponyfill 启用 watch: true 时依赖 DOMSubtreeModified 事件监听样式变更，但 IE11 不支持该事件，结果是静默退化为单次执行——后续 JS 调用 document.documentElement.style.setProperty('--color', 'red') 不会触发重计算。
- ✅ 推荐配置：
watch: false，并在 JS 动态改变量后手动调用cssVars({ variables: { '--color': 'red' } }) - ❌ 不要依赖
watch: true实现夜间模式自动同步，IE11 下它不工作 - 若必须响应变化，需自己封装：监听主题切换事件 → 收集新变量 → 显式调用
cssVars
calc(var(--x) + 1px) 类表达式在 IE11 中仍会失效
即使 css-vars-ponyfill 把 var(--gap) 替换成了 16px，最终生成的 calc(100% - 16px) 仍会被 IE11 拒绝——IE9+ 对 calc() 支持极弱，仅接受数字与单位紧贴、无空格、无多余字符的极简格式（如 calc(100% - 16px) 是 OK 的，但 calc(100% - var(--gap)) 经替换后若带空格或括号嵌套，就可能崩）。
- ✅ 安全做法：避免在
calc()内直接用var()；改用 PostCSS 构建时降级（postcss-custom-properties+preserve: false） - ❌ 不要指望 ponyfill 处理
@media (min-width: var(--sm))—— IE 直接跳过整条@media规则 - 混合表达式如
color: hsl(var(--h), var(--s), var(--l))也不支持，ponyfill 只替换顶层var()
构建时降级 + 运行时兜底必须分层配合
单独靠 css-vars-ponyfill 或单独靠 postcss-custom-properties 都容易双失效。PostCSS 构建时能处理所有静态变量，但无法覆盖 JS 动态设置的场景；ponyfill 能兜底运行时逻辑，但性能差、能力有限。
- ✅ 正确分层：
postcss-custom-properties设置preserve: false，构建后 CSS 中不再留var()；css-vars-ponyfill仅作为 JS 主题切换等动态场景的备用通道 - ❌ 常见错误：
postcss-custom-properties用默认preserve: true，构建后仍保留var(--x)，而 ponyfill 又因变量未定义或作用域不对而跳过，最终 IE 里全是默认值 - 务必确保 ponyfill 执行时机晚于 CSS 加载完成，不要放在
同步执行，推荐挂到DOMContentLoaded或window.onload
真正麻烦的不是加 polyfill，而是变量定义位置、执行时机、表达式复杂度这三点交叉导致的静默失败——控制台没报错，样式却全丢了，得一层层查 DOM 中是否注入了内联 style、:root 是否真有定义、calc() 里有没有混用。这些细节不卡准，光引库没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
