Vite 会自动读取 postcss.config.js，但必须用 CommonJS 导出、手动安装插件、注意顺序和写法，否则静默失效；常见问题包括 @apply 报错、color-mix() 不转译、嵌套语法失效等。
直接说结论：Vite 会自动读取 postcss.config.js，但插件必须手动安装、CommonJS 导出、且顺序/写法稍有不慎就静默失效——不是写了就起作用。
为什么 postcss.config.js 写了却没生效？
常见错误现象：@apply 报错、color-mix() 不转译、& 嵌套语法被当普通字符、旧版 Safari 里伪类失效。根本原因不是 Vite 没加载，而是：
-
postcss.config.js必须用module.exports = { ... }（CommonJS），不能用export default（ESM）——Vite 当前不支持 - 插件名写错或路径不对，比如写成
'autoprefixer'却没装包，或写成require('autoprefixer')()多加了括号，报TypeError: plugin is not a function - 插件顺序错误：例如
tailwindcss必须在autoprefixer之前，否则前缀可能加不到 Tailwind 生成的规则上 - 用了数组写法但没调用插件函数，比如
[autoprefixer]而不是[autoprefixer()]，尤其在vite.config.js中容易踩坑
plugins 用对象写法还是数组写法？
推荐对象写法，更安全、可读性高、且 Vite 官方文档明确支持自动 require()：
module.exports = {
plugins: {
'postcss-preset-env': { stage: 3 },
autoprefixer: { overrideBrowserslist: ['> 0.5%', 'last 2 versions', 'not dead'] },
'postcss-nested': {},
'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] }
}
}
对象写法下，Vite 会自动按名 require 对应模块，你不用管 require('...') 或调用逻辑；而数组写法要求每个插件都已正确导入并执行（如 autoprefixer()），稍一疏忽就中断整个 PostCSS 链。
立即学习“前端免费学习笔记（深入）”；
注意：cssnano 在开发模式默认不启用，只在生产构建时压缩，且其 preset 参数直接影响输出结果——'default' 更保守安全，'advanced' 可能误删关键声明（比如某些自定义属性 fallback）。
哪些插件必须装，哪些其实可以跳过？
Vite 不自带任何 PostCSS 插件，所有功能都靠你显式安装和启用：
- 必须装且配的：
autoprefixer（补前缀）、postcss-preset-env（支持 nesting / color-mix / :has 等新语法）、tailwindcss（若用 Tailwind） - 可省略配置但需安装的：
postcss-import（Vite 原生支持@import，无需插件）、postcss-url（资源引用由 Vite 的assetsInlineLimit和publicDir接管） - 按需装的：
postcss-pxtorem（仅移动端 rem 适配需要）、cssnano（仅需压缩时才启用，且建议只在 build 阶段生效）
特别提醒：postcss-preset-env 默认会转译 CSS 自定义属性（--var），但如果你同时用 Tailwind，得关掉它：{ stage: 3, preserve: false, features: { 'custom-properties': false } }，否则和 Tailwind 的变量机制冲突。
配置后如何快速验证是否生效？
别等打包完看效果，用这几个低成本方式立刻判断：
- 在
.css文件里写一句div { color-mix(in srgb, red 50%, blue); }，保存后检查浏览器开发者工具里该行是否被转译成color: #800080类似静态值 - 写嵌套规则：
.card { &__title { font-size: 1rem; } }，看编译后是否生成.card__title而不是原样保留&__title - 查 Vite 启动日志，如果有
PostCSS config loaded from ...提示，说明文件被识别；若完全没这条日志，大概率是文件名拼错（比如写成postcss.config.cjs或postcss.js）或路径不在项目根目录
最易被忽略的一点：Vite 的 css.postcss 选项（在 vite.config.js 里）和 postcss.config.js 是合并关系，但后者优先级更高；如果两个地方都配了同名插件，后者会覆盖前者——调试时记得确认你改的是哪个文件。
