PostCSS自动化处理CSS方法详解

PostCSS 是一个轻量灵活的 CSS 处理平台，它本身不直接转换代码，而是通过插件链（如 autoprefixer、cssnano、postcss-preset-env）按需实现语法扩展、兼容性补全、压缩优化等功能；它既非预处理器也非构建工具，而是深度融入现代构建生态——在 Vite 中开箱即用、只需配置 `postcss.config.js` 即可自动处理所有 CSS 相关资源，在 Webpack 中则通过 `postcss-loader` 无缝集成；理解其“插件驱动+构建工具托管”的本质，避开“装了就生效”的误区，掌握配置位置、插件安装、执行顺序和作用范围等关键细节，才能真正释放自动化 CSS 处理的效率与可靠性。

PostCSS 是什么，它和 Webpack / Vite 的关系怎么理清

PostCSS 不是 CSS 预处理器（比如 Sass），也不是构建工具（比如 Webpack），而是一个用 JavaScript 插件链式处理 CSS 的平台。它本身不干具体事，靠插件干活——postcss-preset-env 解析新语法，autoprefixer 加浏览器前缀，cssnano 压缩，都是靠它串联起来的。

你不需要单独“运行 PostCSS”，它通常被集成进构建工具里：Webpack 通过 postcss-loader，Vite 默认就内置了 PostCSS 支持（只要项目根目录有 postcss.config.js 或 postcss.config.cjs 就自动启用）。

常见误区是以为装了 postcss 就能直接处理文件——其实必须配插件、必须被构建流程调用，否则只是个空壳。

如何让 PostCSS 自动处理 .css 文件（以 Vite 为例）

Vite 开箱支持 PostCSS，但需显式配置才能生效。关键不是“启动 PostCSS”，而是“告诉 Vite：对 CSS 文件走一遍 PostCSS 流程”。

• 在项目根目录新建 postcss.config.js
• 内容至少包含 plugins 字段，哪怕只写一个插件
• 确保已安装对应插件，比如 npm install -D autoprefixer

module.exports = {
  plugins: {
    autoprefixer: { overrideBrowserslist: ['> 1%', 'last 2 versions'] }
  }
}

这样，所有 .css、.vue 里的