css-vars-ponyfill在IE11中仅支持:root定义的静态CSS变量，不处理组件级作用域、calc()混合表达式或嵌套变量；需禁用watch、确保执行晚于CSS加载，并配合PostCSS构建时降级（preserve:false）分层使用。
css-vars-ponyfill 能让 IE11 显示 CSS 变量，但不是加了脚本就自动生效——它只处理 :root 里定义的静态变量，且默认不扫描组件级作用域、不支持 calc() 混合表达式。直接引入后没效果，大概率是变量源没被它看到。
变量必须定义在 :root 中，不能写在组件选择器里
IE11 下 css-vars-ponyfill 默认只读取 :root 声明块里的 --* 变量。如果你把变量写在 .card { --pad: 1rem; } 或 Vue 的 <style scoped> 里，插件根本不会识别。
- ✅ 正确写法：
:root { --primary: #007bff; --gap: 8px; } - ❌ 错误写法：
.btn { --color: red; }或:host { --size: 24px; } - Webpack + CSS Modules 项目中，类名哈希化会破坏作用域关联，必须改用全局
:root定义
执行时机必须晚于所有 CSS 加载完成
脚本在 <head> 里同步执行，而 CSS 文件还没加载完，css-vars-ponyfill 扫不到任何 var(--x) 定义，结果是内联样式没注入、元素样式回退成浏览器默认值。
- 不要在
<head>中同步调用cssVars() - 改用
DOMContentLoaded或window.addEventListener('load', ...)包裹 - React 中应在
useEffect(() => { cssVars() }, [])；Vue 中应在onMounted中调用
watch: false 是 IE11 下的正确配置
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() 在 IE11 中双重失效
即使 css-vars-ponyfill 把 var(--gap) 替换成了 16px，最终生成的 calc(100% - 16px) 仍会被 IE11 拒绝——IE9+ 对 calc() 支持极弱，仅接受数字与单位紧贴、无空格、无多余字符的极简格式。
- ✅ 安全做法：避免在
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()
真正难处理的不是变量本身，而是那些你以为“替换完就完事”的地方：比如 calc() 里嵌套、媒体查询里用变量、JS 动态设值后没手动触发重计算——这些点一旦漏掉，IE11 就会静默丢弃整条声明，连 fallback 都不走。
