介绍

PostCSS 是一个使用 JavaScript 插件 转换 CSS 的工具，本身不做任何处理，全部能力来自插件。

定位

CSS 后处理器，不是新语言，输入输出都是标准 CSS。Vue‑CLI、Vite、Webpack 内部默认集成 PostCSS。

工作原理

整体流程：CSS源码 → 解析为AST抽象语法树 → 插件批量修改AST → AST生成CSS字符串 → 输出处理后的CSS

输入CSS → Parser解析 → CSS AST → [插件1→插件2→插件3] → 修改后的AST → Stringifier生成 → 输出CSS

• Parser：把文本CSS转成JS可操作的树结构
• 插件：JS函数，遍历、增删改AST节点（选择器、属性、值、注释）
• Stringifier：把AST重新输出为CSS文本

关键点：PostCSS 操作的是AST树，不是字符串正则替换，解析更可靠，不会破坏注释、格式。

常用插件

1. autoprefixer（最知名）

根据 browserslist + caniuse 数据，自动添加浏览器私有前缀 -webkit‑/‑moz‑/‑ms‑，自动移除不需要的前缀。

/*源码*/
.user { user-select: none; }
/*输出*/
.user { -webkit-user-select: none; user-select: none; }

现代脚手架默认自带，不需要手写前缀。依赖项目的 browserslist 配置。

2. postcss‑preset‑env

把未来的CSS新语法转成浏览器兼容CSS（CSS Next），例如嵌套、颜色函数、@nest。替代老的 cssnext。

3. cssnano

生产环境CSS压缩、去注释、合并规则、优化属性值，CSS生产压缩工具。

4. postcss‑import

解析css的@import，把导入文件内容直接合并进输出文件，减少网络请求。

5. postcss‑nested

给原生CSS增加嵌套语法，类似Sass嵌套，不用Sass也能写嵌套。

.nav {
  ul { margin:0; }
}

6. postcss‑px‑to‑viewport / postcss‑pxtorem

移动端适配：px 单位自动转为 vw/vh 或者 rem。

7. stylelint

CSS代码检查，代码格式化、检测语法错误，类似ESLint for CSS。

8. postcss‑modules

实现CSS Modules，实现样式隔离，生成哈希类名。

常见误区

1. ❌ PostCSS不是预处理器

   ✔ PostCSS本身不认识嵌套、变量；要嵌套需要安装对应插件。

2. ❌ autoprefixer是PostCSS内置功能

   ✔ autoprefixer是独立插件，必须手动加入plugins数组。

3. ❌ PostCSS只能处理Sass编译后的产物

   ✔ 可以直接处理原生.css文件，也可以放在Sass编译之前处理。

4. ❌ 修改css源码字符串做替换

   ✔ PostCSS基于AST，优先操作节点，而不是正则字符串替换。

在构建工具中的使用

1. Vite：自动读取postcss.config.js，开箱即用，无需额外安装loader。

2. Webpack：使用postcss‑loader，放在css‑loader之前。

   // webpack module.rules
   {
   test: /\.css$/,
   use: ['style-loader','css-loader','postcss-loader']
   }