在 vite 项目中配置 postcss，需要在 vite.config.js 中通过 css.postcss 选项加载插件。通常先安装 postcss、autoprefixer 和 postcss-import，然后在配置文件中指定插件列表，vite 会自动处理 css 预处理。
如何安装并初始化 PostCSS 依赖
直接运行 npm 命令安装必要的包即可。推荐使用 npm install -D postcss autoprefixer postcss-import 来安装核心库和常用插件。postcss-import 用于支持 @import 语法，autoprefixer 负责自动添加浏览器前缀。
npm install -D postcss autoprefixer postcss-import
安装完成后，项目根目录会生成 package.json 的 devDependencies 部分包含这些包。此时无需创建 postcss.config.js 文件，因为 Vite 允许直接在配置中定义插件，这样更集中且易于管理。
如何在 vite.config.js 中注入插件
在 vite.config.js 的 css 字段下配置 postcss 对象。该对象接受一个 plugins 数组，将之前安装的插件实例放入其中。Vite 会在构建 CSS 时按顺序执行这些插件。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
require('postcss-import'),
require('autoprefixer')
]
}
}
});
这种写法避免了额外的配置文件，插件按数组顺序执行。如果有多个插件，只需继续添加到数组中。例如加入 postcss-nested 来处理嵌套语法，只需追加 require('postcss-nested') 到数组末尾。Vite 会自动识别这些标准 PostCSS 插件并应用它们。
PostCSS 插件执行顺序对结果的影响
当同时使用 postcss-nested 和 autoprefixer 时，执行顺序至关重要。如果 autoprefixer 在 postcss-nested 之前执行，它可能无法正确识别被嵌套展开后的属性，导致前缀缺失或错误。因此，必须先展开嵌套，再添加前缀。
css: {
postcss: {
plugins: [
require('postcss-nested'), // 先展开嵌套
require('autoprefixer') // 后添加前缀
]
}
}
上述代码中，postcss-nested 首先将 SCSS 风格的嵌套规则转换为标准的 CSS 选择器。随后 autoprefixer 遍历所有属性，根据目标浏览器版本添加必要的前缀。若交换顺序，autoprefixer 看到的是未展开的嵌套结构，可能漏掉某些属性的前缀处理。实际测试中，错误的顺序会导致生成的 CSS 缺少 -webkit- 等前缀，而正确的顺序则能完整输出。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
