PostCSS本身不处理CSS变量兼容性，需配合postcss-custom-properties等插件静态替换变量值，并手动提供fallback（如color: #007bff; color: var(--primary)），同时禁用cssnano的重复声明删除以保障IE兼容。
PostCSS本身不处理CSS变量兼容性
PostCSS 不会把 :root { --color: red } 自动转成 IE 可用的 .my-class { color: red }；它只负责前缀补全、语法转换等静态重写，不模拟运行时行为。CSS 变量（--xxx）在 IE 中完全不支持，任何 PostCSS 插件都无法“修复”这种缺失——这是语言级限制，不是语法糖问题。
postcss-custom-properties 只做变量内联，不降级
这个插件能将 color: var(--color) 替换为 color: red，但前提是变量值在同一个文件或已 @import 的 CSS 中静态可解析。它不会生成 fallback 值，也不会处理动态 JS 修改变量的场景。
- 只支持简单赋值，如
--size: 1rem；不支持 calc() 嵌套、var() 嵌套、CSS Houdini 注册属性 - 若变量定义在外部文件且未被 PostCSS 正确 import（比如通过
@import url(...)或构建工具跳过），替换会失败，保留原var(--x) - 默认不启用
preserve选项，替换后原始var()会被删掉；开启后保留，但 IE 仍无法识别
真正需要兼容 IE 时，必须手动 fallback + 工具辅助
IE 兼容只能靠双写：color: #007bff; color: var(--primary);。PostCSS 可以帮你自动加这行，但不能替你决定哪条是 fallback、哪条是主逻辑。
- 用
postcss-custom-properties配合preserve: true，再接postcss-fallback（需手动安装）插入 fallback 值 - 更稳妥的做法：在 Sass/Less 中写
$primary: #007bff; .btn { color: $primary; color: var(--primary); }，由预处理器保证顺序和值一致 - 检查是否漏掉关键 fallback：运行
npx postcss input.css --use postcss-custom-properties --no-map -o out.css，对比输出中是否每处var()都有前置声明值
注意构建流程中 cssnano 的干扰
如果用了 cssnano，它默认会删除“重复声明”，比如 color: #007bff; color: var(--primary) 中的前者——因为它的压缩逻辑认为后者覆盖前者。这会让 IE 直接失效。
- 必须禁用 cssnano 的
duplicateDeclaration规则：{ preset: ['default', { duplicateDeclaration: false }] } - 确保
postcss-custom-properties在cssnano之前执行，否则 fallback 值可能被提前删掉 - Vite 用户特别注意：vite-plugin-css-injected-by-js 等插件可能绕过 PostCSS，导致变量未处理就进 HTML
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
