PostCSS 是一个基于 JavaScript 插件转换 CSS 的平台，通过解析 CSS 为 AST、插件遍历修改、再生成新 CSS；它不内置语法扩展，所有功能依赖插件，可与 Sass/Less 共存，配置需注意插件顺序和环境兼容性。
PostCSS 是什么，它和 CSS 预处理器有啥区别
PostCSS 不是 CSS 预处理器（比如 Sass、Less），也不是运行时工具；它是一个用 JavaScript 插件转换 CSS 的平台。核心逻辑是：把 CSS 字符串解析成 AST，插件遍历修改节点，再生成新 CSS。这意味着它不内置语法扩展能力，所有功能靠插件实现——postcss-preset-env 解析 :is()、postcss-nested 支持嵌套写法、autoprefixer 补全浏览器前缀，都是独立插件。
- 它不强制你换语法，可与 Sass/Less 共存（先编译 Sass，再喂给 PostCSS 处理）
- 插件链顺序很重要：
postcss-nested必须在autoprefixer之前，否则嵌套规则还没展开就去加前缀，会漏处理 - 官方推荐用
postcss-load-config自动加载配置，避免手写冗长的postcss.config.js
如何快速接入 PostCSS 到现有项目
以 Webpack 为例，只需三步：
- 安装依赖：
npm install -D postcss postcss-loader postcss-preset-env autoprefixer - 在项目根目录新建
postcss.config.js，内容为：module.exports = { plugins: [ 'postcss-preset-env', 'autoprefixer' ] } - 修改 Webpack 的
css-loader链，在style-loader和css-loader之间插入postcss-loader（注意 loader 执行顺序是从右到左）
常见错误：
- 忘记安装
caniuse-lite，导致autoprefixer报Cannot find module 'caniuse-lite' -
postcss.config.js放错位置（必须在 Webpack 入口文件所在目录或其祖先路径） - 使用了
postcss-preset-env却没配browserslist，结果gap、aspect-ratio等新属性没生效
哪些插件真正值得加进日常开发流程
不是所有插件都适合开箱即用，选几个高频刚需的：
立即学习“前端免费学习笔记（深入）”；
-
autoprefixer：必须开，自动加前缀，比手动写-webkit-可靠得多 -
postcss-preset-env：替代部分预处理器能力，支持@custom-media、color-mix()等实验性语法（需配stage: 3） -
postcss-discard-comments：上线前删注释，减小体积（开发环境建议关掉，方便调试） -
postcss-reporter：把插件警告（如过时属性）输出到终端，避免 silent fail
慎用：
-
cssnano：压缩 CSS 很强，但默认开启 aggressive 合并（比如把margin: 0和padding: 0合成一个声明），可能破坏 BEM 或 utility-first 类名语义 -
postcss-import：能@import局部文件，但 Webpack 已原生支持 CSS import，重复引入易造成重复打包
为什么 PostCSS 配置容易“失效”，怎么排查
最常遇到的现象是：插件明明装了、写了、也 reload 了，但 CSS 没变化，或者报错不明确。
- 检查 Webpack 的
resolveLoader是否包含node_modules，否则postcss-loader找不到 - 运行
npx postcss --config ./postcss.config.js input.css -o output.css手动测试，绕过构建工具验证插件本身是否工作 - 在插件数组里加个哑巴插件看是否执行：
() => { console.log('postcss running') }，确认配置被读取 - 注意 Node 版本：低于 14.18 的旧版本可能无法运行新版
postcss-preset-env（报Must use import to load ES Module）
PostCSS 的灵活性来自插件组合，但也意味着每个环节都可能断链。真正卡住人的往往不是某个插件不会用，而是 loader 链中某处没接上，或者插件版本和 PostCSS 主版本不兼容。
