PostCSS 是一个基于 JavaScript 插件链式处理 CSS 的平台，本身不直接处理 CSS，需通过插件（如 autoprefixer、cssnano）实现功能，并集成于 Webpack（via postcss-loader）或 Vite（默认内置支持，依赖 postcss.config.js 配置）中运行。
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 里的 <style>、.tsx 中的 CSS-in-JS 字符串（如果 loader 支持），都会经过 Autoprefixer 处理。不用改 vite.config.ts，Vite 会自动读取。
注意：postcss.config.js 必须导出一个对象或函数；若用 ESM 格式（export default {}），要确保文件后缀是 .mjs 或在 package.json 中设 "type": "module"，否则 Vite 会静默忽略。
为什么写了配置却没生效？几个高频断点
PostCSS “看起来没跑”往往不是配置错，而是触发条件没满足：
-
postcss.config.js不在项目根目录（即执行vite build或vite命令时的当前工作目录） - CSS 文件路径被构建工具排除了，比如放在
public/下——Vite 不会对public/里的文件走任何 loader，PostCSS 自然不触发 - 插件未正确安装，或版本与 PostCSS 主版本不兼容（如 PostCSS 8.x 需搭配
autoprefixer@10+） - 使用了
@import引入外部 CSS，但没配postcss-import插件，导致被 import 的文件根本没进处理流水线
验证是否生效最简单的方法：在 CSS 里写一条带新语法的规则，比如 color: rgb(100 200 50 / 0.5);，再看构建后的产物是否被转成 rgba() 形式；或者故意写错 browserslist 配置，看控制台是否报错。
要不要单独用 CLI 运行 PostCSS？什么场景下值得
绝大多数前端项目不需要单独跑 postcss CLI。只有两类情况例外：
- 需要预处理非构建流程内的 CSS 文件，比如设计稿导出的原始
style.css，要批量加前缀再交给别人用 - CI/CD 中做独立校验，比如用
postcss-reporter检查 CSS 是否含不兼容语法
此时才用 CLI：
npx postcss src/assets/base.css -o dist/base.css --config ./postcss.config.js
但要注意：CLI 模式下，postcss.config.js 的 from 和 to 路径会影响插件行为（比如 postcss-url 重写资源路径），而构建工具中这些由 loader 自动推导。同一份配置，在 CLI 和 Vite 中可能表现不同。
真正容易被忽略的是：PostCSS 插件的执行顺序很重要。比如必须先 postcss-import 再 autoprefixer，否则 @import 的内容不会被加前缀。这个顺序在 plugins 对象里靠书写顺序决定，而不是靠插件名排序。
