autoprefixer不能给CSS变量加兜底值，因其仅处理厂商前缀，不解析var()；需用postcss-custom-properties配合preserve:true和手动fallback声明，并禁用cssnano的duplicateDeclaration规则。
为什么 autoprefixer 不能给 CSS 变量加兜底值
autoprefixer 只处理浏览器厂商前缀（如 -webkit-、-ms-），对 var(--color) 这类 CSS 自定义属性完全无感。它不解析变量、不内联值、更不插入 fallback —— 这不是它该干的事。你写了 color: var(--primary); 却没看到 color: #007bff; 跟在前面，不是插件没运行，而是压根没配对的插件。
必须用 postcss-custom-properties + 显式 fallback 声明
真正能做变量内联的是 postcss-custom-properties，但它默认只替换、不保留原始声明，也不自动加 fallback。要让它产出兼容 IE/旧浏览器的双写语法，得配合两个关键动作：
- 启用
preserve: true选项，让var(--x)保留在输出中（否则会被删光） - 在源码里**手动写好 fallback**：比如
color: #007bff; color: var(--primary);，插件才可能识别并内联 - 确保变量定义可被静态解析：要么在同一个文件，要么通过
@import引入且该@import被 PostCSS 处理（不是@import url()）
cssnano 会悄悄删掉你的兜底值
如果你开了 cssnano（尤其 Vite/Webpack 默认启用），它默认启用 duplicateDeclaration 规则——看到 color: #007bff; color: var(--primary); 就认为前者冗余，直接删掉。结果 IE 加载时只剩 var()，彻底失效。
必须显式禁用它：
{
preset: ['default', { duplicateDeclaration: false }]
}
同时确认 postcss-custom-properties 在 cssnano **之前执行**，否则 fallback 还没生成就被优化掉了。
Vite 用户特别注意：css.postcss.options 可能绕过 postcss.config.js
Vite 5+ 默认加载 postcss.config.js，但一旦你在 vite.config.js 中写了 css.postcss.options.plugins，就会**完全覆盖**默认配置，包括你写的 postcss-custom-properties。这时候 fallback 不生效，不是插件坏了，是它根本没进流水线。
验证方法很简单：
- 在
postcss.config.js里故意require('xxx')一个不存在的模块 - 启动开发服务器——如果没报错，说明该文件压根没被读取
- 优先删掉
vite.config.js中所有css.postcss.options相关配置，回归约定式加载
兜底值这事没法全自动：变量名、fallback 值、是否需要降级，都得你来决定；PostCSS 插件只是帮你把写好的双写语句稳定输出，不猜、不补、不越界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
