必须将 postcss-custom-properties 的 preserve 设为 false 以彻底移除 var()，否则 ie11 会静默丢弃含 var() 的整条 css 声明；变量须定义在 :root 中且值为静态，媒体查询和复合属性中禁用 var()，避免与 css-vars-ponyfill 冲突。
必须让最终生成的 CSS 文件里彻底没有 var() 函数调用，否则 IE11 及更早版本会静默丢弃整条声明——不是降级，是样式消失。
postcss-custom-properties 必须设 preserve: false
默认配置下插件只追加静态值，比如把 color: var(--primary); 编译成：
color: #007bff; color: var(--primary);
IE 会跳过第二行，最终取继承值或 initial（color 常为黑色，background 为透明）。
-
preserve: false才会删掉含var()的原始行，只保留color: #007bff; -
preserve: true或不配该选项 → 构建后仍有var(--x)→ IE 失效 - Webpack/Vite 中，
postcss-custom-properties必须在autoprefixer之前，否则可能被覆盖
:root 是唯一安全的变量定义位置
PostCSS 插件只处理构建时能静态求值的变量，以下情况一律跳过：
- 变量没写在
:root里，比如.card { --pad: 1rem; }→ 插件不提取 - 值含
calc()或嵌套var()，如--text: rgb(var(--r), var(--g), var(--b));→ 不解析 - 变量来自 JS 动态设置：
el.style.setProperty('--color', 'red')→ 构建时不可见，无法替换
推荐做法：所有主题变量集中写在 :root，值为纯字符串或数字，例如 --primary: #007bff;，再通过 importFrom 从 JSON 统一管理。
媒体查询和复合属性中不能用 var()
@media (min-width: var(--bp)) 或 background: var(--bg) url(img.png); 这类写法，IE 会直接跳过整条规则——背景变透明、断点失效、布局塌陷。
- 媒体查询断点必须用固定值，或配合
no-cssvars类做 JS 特征检测后切换样式 - 避免在
font、clip-path等复杂属性中混用var()，IE 解析器容易放弃整条规则 - 复合属性建议拆开：先定义单值变量（如
--gap: 8;），再组合进margin: calc(var(--gap) * 1px);
别同时用 css-vars-ponyfill 和 preserve: false
css-vars-ponyfill 依赖原始 var() 存在才能扫描并替换；若 PostCSS 已删掉所有 var()，它就无事可做，最终双失效。
- 若选 ponyfill，必须配
preserve: true，且确保变量全在:root，watch: false（IE11 不支持DOMSubtreeModified） - JS 动态设置变量后，需手动调用
cssVars({ variables: { '--x': 'red' } }) - 真正有效的兜底是手动加
no-cssvars类：，然后写.no-cssvars .btn { background: #007bff; }
最容易被忽略的是变量作用域和构建时机——你写的 :root 变量是否真被插件读到，构建产物里是否还有残留的 var()，得亲自打开 dist 文件确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
