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 插件，所有功能都依赖你显式安装和启用。

必须安装并配置的典型插件：

• autoprefixer：补全浏览器前缀，无配置也能工作，但建议加 overrideBrowserslist 显式控制目标环境
• cssnano：仅在生产构建时压缩 CSS，开发时默认不启用（Vite 的 build.cssCodeSplit 和 minify 选项不影响它）
• postcss-preset-env：替代 autoprefixer + 多个语法转译插件，用一个即可覆盖 custom-properties、nesting-rules 等新特性

可省略配置的插件（但需安装）：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 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 之前，否则新语法还没转译就被加前缀，可能出错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！