postcss-preset-env必须手动安装并显式配置，vite不自带该插件；需通过vite.config.js的css.postcss.plugins对象启用，指定stage、features及importfrom路径，并以npm run build验证兜底值生成。
postcss-preset-env 必须显式安装和启用
Vite 不自带任何 PostCSS 插件，postcss-preset-env 不能靠“默认支持”或“自动启用”——它必须手动安装，且必须在配置中明确列出。漏装或只装不配，CSS 变量（var(--foo)）不会生成兜底值，老浏览器直接失效。
- 运行
npm install postcss-preset-env --save-dev（注意是--save-dev） - 仅靠
postcss.config.js文件存在，Vite 不会自动读取；必须通过vite.config.js的css.postcss显式注入插件 - 如果同时用了
autoprefixer，建议删掉它——postcss-preset-env已内置，并且启用grid: true才能正确处理display: grid等特性
vite.config.js 中的 plugins 写法要避免 TypeError
用对象写法（而非数组）更安全，否则容易触发 TypeError: plugin is not a function。Vite 会自动 require() 插件模块，但数组里如果直接写 postcss-preset-env 而不调用，就会报错。
- ✅ 正确写法：
plugins: { 'postcss-preset-env': { stage: 2, features: { 'custom-properties': true } } } - ❌ 错误写法：
plugins: [postcssPresetEnv]（没调用、没传参，且未 import） -
stage: 2是推荐起点：覆盖绝大多数已进入 CR 阶段的特性（包括 CSS 变量、嵌套、自定义媒体查询），stage: 3会禁用变量降级，慎用
全局 CSS 变量需用 importFrom 指向源文件
PostCSS 默认不知道你的 --primary-color 定义在哪，不指定路径，就无法生成 color: #1890ff; color: var(--primary-color); 这样的兼容回退。
- 在
postcss-preset-env配置中加importFrom: './src/assets/cssVars.css' -
importFrom支持字符串或数组，多个变量文件可一起传入 - 确保该 CSS 文件里是纯变量声明，例如
:root { --primary-color: #1890ff; }，不要混入其他规则 - 路径必须相对于项目根目录，不是
vite.config.js所在位置
验证是否生效的关键看编译后 CSS
别只看源码写了 var(--x) 就以为 OK。真正起作用的是构建产物里的兜底值——开发时热更新可能不触发完整 PostCSS 流程，务必 npm run build 后检查 dist 中的 CSS 文件。
- 搜索输出 CSS 中是否同时存在两行：
color: #xxx;和color: var(--x); - 如果只有
var(--x)，说明importFrom路径错、变量没被识别，或features.custom-properties没设为true - 注意：Vite 开发服务器（
vite dev）对 PostCSS 的处理有时跳过部分插件逻辑，build 才是真实链路
importFrom 的路径解析方式和 build 时才真正生效这个事实。很多人在 dev 模式下反复刷新却看不到兜底值，最后发现只是没跑构建。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
