Vite默认支持PostCSS但不预装插件，必须显式安装并配置插件（如autoprefixer、cssnano）才能生效；推荐使用CommonJS格式的postcss.config.js，因其被优先识别、解耦构建流程且更易复用。
Vite 默认支持 PostCSS，但插件必须显式声明，否则不会生效——哪怕你已经装了 autoprefixer 或 cssnano，不配置就等于没装。
为什么 postcss.config.js 是最稳妥的配置入口
它被 postcss-load-config（Vite 内置）优先识别，且与构建流程解耦。相比在 vite.config.js 里写 css.postcss.plugins，postcss.config.js 更易复用、更少受 Vite 版本升级影响，团队协作时也更直观。
常见错误现象包括：
- 装了
autoprefixer却没加前缀 → 没配postcss.config.js或路径不对 - 构建后 CSS 没压缩 →
cssnano插件未启用，或preset被设为false - 嵌套语法报错 →
postcss-nested没装或没列在plugins里
使用场景：适合多数中大型项目，尤其是需要多环境（dev / build）统一处理逻辑的场景。
立即学习“前端免费学习笔记（深入）”；
推荐写法（Node.js CommonJS 风格，兼容性最广）：
module.exports = {
plugins: {
autoprefixer: {},
'postcss-nested': {},
cssnano: {
preset: 'default'
}
}
}
注意：plugins 对象写法比数组更清晰，Vite 会自动 require() 对应模块；若用数组，需确保每个插件已调用（如 autoprefixer()），否则可能报 TypeError: plugin is not a function。
哪些插件必须手动安装，哪些能省略配置
Vite 不自带任何 PostCSS 插件，所有功能都依赖你显式安装和启用。
必须安装并配置的典型插件：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
autoprefixer：补全浏览器前缀，无配置也能工作，但建议加overrideBrowserslist显式控制目标环境 -
cssnano：仅在生产构建时压缩 CSS，开发时默认不启用（Vite 的build.cssCodeSplit和minify选项不影响它） -
postcss-preset-env：替代autoprefixer+ 多个语法转译插件，用一个即可覆盖custom-properties、nesting-rules等新特性
可省略配置的插件（但需安装）：
-
postcss-import：Vite 原生支持@import，无需额外插件 -
postcss-url：Vite 的assetsInlineLimit和publicDir已接管资源引用逻辑
cssnano 的 preset 选 default 还是 advanced
cssnano 的 preset 参数直接决定压缩激进程度，不是“越高级越好”。
preset: 'default'：
- 保留注释（除非加
discardComments: { removeAll: true }） - 不合并重复选择器，避免意外覆盖
- 安全，适合上线前验证阶段
preset: 'advanced'：
- 会移除所有非必要空格、分号，合并相同声明块
- 可能把
display: -webkit-box和display: flex合并成单条，导致旧版 Safari 失效 - 只建议在 CI/CD 流水线中启用，并配合视觉回归测试
示例（谨慎启用 advanced）：
cssnano: {
preset: ['advanced', {
zindex: false, // 不重排 z-index，避免层叠错乱
discardComments: { removeAll: true }
}]
}
vite.config.js 中 css.postcss 的覆盖行为要小心
如果同时存在 postcss.config.js 和 vite.config.js 里的 css.postcss，后者会完全忽略前者——不是合并，是彻底覆盖。
这意味着：
- 你在
postcss.config.js里配了autoprefixer和postcss-nested - 又在
vite.config.js里写了css.postcss: { plugins: [cssnano()] } - 结果：只有
cssnano生效，前两个插件被丢弃
所以，要么统一用 postcss.config.js，要么全收口到 vite.config.js；混用时务必确认最终生效的是哪个配置，用 console.log 打印 process.env.NODE_ENV 和插件加载顺序来验证。
真正容易被忽略的一点：PostCSS 插件的执行顺序就是 plugins 数组/对象的书写顺序。比如 postcss-preset-env 必须放在 autoprefixer 之前，否则新语法还没转译就被加前缀，可能出错。
