IE11完全不解析var(--x)，整条CSS声明静默丢弃，必须用postcss-custom-properties设preserve:false静态替换或css-vars-ponyfill运行时补丁；变量须定义在:root且为纯常量，后备值和@supports均无效。
IE11 完全不解析 var(--x)，整条 CSS 声明会被静默丢弃——不是颜色没变，而是样式直接消失。必须用构建时静态替换或运行时 polyfill，二者选一，不能只靠后备值或 @supports。
postcss-custom-properties 必须设 preserve: false
默认配置下插件只追加降级值，比如把 color: var(--primary); 编译成：
color: #007bff; color: var(--primary);
IE 看到第二行就跳过，最终取继承值（常为黑色文字、透明背景）。只有显式设 preserve: false，插件才会删掉含 var() 的行，只留静态值。
- 漏配或写成
preserve: true→ 构建后仍有var(--x)，IE 依旧失效 - Webpack/Vite 中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前，否则可能被覆盖 - 变量定义必须在
:root，且值为纯常量（--gap: 12px;✅，--size: calc(1rem + 2px);❌）
css-vars-ponyfill 只读 :root，且不能处理 calc(var())
它在 DOM 加载后扫描所有 style 标签和 link[rel="stylesheet"]，提取 :root 中定义的变量，再把 var(--x) 替换为计算值并注入 element.style。
- 变量必须写在
:root { --primary: #007bff; }，组件级作用域（如.card { --pad: 1rem; }）不会被读取 - 不支持
width: calc(100% - var(--gap))这类嵌套，插件只替换顶层var()，不进calc()解析 - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析 - 禁用
watch: true（IE11 不支持DOMSubtreeModified），改用watch: false避免静默失败
后备值写法无效，@supports 也不能兜底
@supports (color: var(--x)) 在 IE11 中本身不被识别，整条规则被忽略；color: var(--c, #333) 同样无效——IE 连 var() 语法都不认识，直接跳过整条声明。
- 唯一有效的“后备”是前置静态值：
color: #333; color: var(--text-color);（IE 用第一行，现代浏览器覆盖） - 复合属性如
background、border不能混用var()，否则整条声明被丢弃 → 拆成background-color、border-color单独声明 - JS 检测应写
CSS.supports('color', 'var(--_)')，而非CSS.supports('--_')（后者在 IE 报TypeError） - 给
加no-cssvars类最可靠：<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script>
PostCSS 和 ponyfill 混用要分层，不能同时开 preserve: true
可以共存，但必须明确分工：PostCSS 负责构建时降级已知常量，ponyfill 负责运行时兜底 JS 动态设置或跨文件变量。
- 常见双失效场景：
postcss-custom-properties用默认preserve: true→ 构建后仍留var(--x)；ponyfill 又因变量未定义或作用域不对而跳过 - 正确组合：
postcss-custom-properties设preserve: false，ponyfill 传入onlyVars: true提速，且确保它在DOMContentLoaded后执行（CSS 已加载完成） - 构建后务必全局搜索
var(--，如果还有残留，说明变量来自 JS 注入、跨文件或含calc()—— 这些 PostCSS 根本看不见，只能靠 ponyfill 或手动改写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
