css-vars-ponyfill在ie中通过运行时扫描:root变量并替换var()为计算值实现兼容，但仅支持:root定义、不支持嵌套和calc混合表达式，需禁用watch、确保变量位于:root且postcss设preserve:false。
IE（包括 IE11）根本不解析 var(--x) 语法，整条 CSS 声明会被直接忽略——不是“颜色没变”，而是 .btn { color: var(--primary); } 在 IE 里等同于 .btn { }。靠 @supports 或 fallback 写法无法兜底，必须用运行时补丁。
css-vars-ponyfill 为什么在 IE 里看起来“生效”了
它不修改原始 CSS，而是在 DOM 加载后扫描所有 style 标签和 link[rel="stylesheet"]，提取 :root 中定义的变量，再遍历所有匹配的 CSS 规则，把 var(--x) 替换成计算后的值，并以内联样式（element.style）注入到对应元素上。
- 只读取静态可读的变量：定义必须在 CSS 文件内（不能是 JS 动态
setProperty），且不能嵌套（--a: var(--b)不支持） - 不支持
calc(var(--gap) + 1px)这类混合表达式；插件只替换顶层var()，不进函数体解析 -
@media (min-width: var(--sm))→ IE 直接跳过整条@media规则，ponyfill 也无能为力 - 默认启用
watch: true会监听DOMSubtreeModified，但 IE11 不支持该事件，实际退化为单次执行
用了 css-vars-ponyfill 却没效果的典型原因
控制台无报错、颜色/尺寸全回退成浏览器默认值、检查元素发现 element.style 为空——这说明 ponyfill 根本没找到可处理的变量源。
- 变量定义在组件级作用域（如
.card { --pad: 1rem; }），而 ponyfill 默认只读:root - 解决办法：把变量显式写在
:root里：:root { --primary: #007bff; --gap: 8; } - 传入
onlyVars: true避免遍历全部 CSS 规则，提升 IE 下执行速度 - 禁用
watch: false；IE11 下开启反而可能因事件不兼容导致静默失败 - 若变量来自 JSON 或 JS 模块，需手动调用
cssVars({ variables: { '--primary': '#007bff' } })
postcss-custom-properties 和 css-vars-ponyfill 能否混用
可以，但必须分层：PostCSS 负责构建时静态降级（针对已知常量），ponyfill 负责运行时兜底（覆盖 JS 动态设置、跨文件变量等 PostCSS 捕捉不到的场景）。
- 常见错误配置：
postcss-custom-properties的preserve: true（默认值）→ 构建后仍留着var(--x)，ponyfill 又因变量未定义而跳过，最终双失效 - PostCSS 必须设
preserve: false，否则 IE 看到color: #007bff; color: var(--primary);会跳过第二行，还是回退 - ponyfill 在
DOMContentLoaded前执行 → CSS 尚未加载完成，找不到任何:root定义 - Webpack + CSS Modules 项目中，哈希类名让 ponyfill 无法关联作用域，必须改用全局
:root变量
真正容易被忽略的是：ponyfill 的性能开销比想象中大——它会在页面加载时遍历全部 DOM 节点，查找 var(--x) 并注入内联样式。SPA 首屏就执行，容易触发强制同步重排。更稳的做法是，仅在用户触发主题切换时才调用 cssVars()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
