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等新属性没生效
哪些插件真正值得加进日常开发流程
不是所有插件都适合开箱即用，选几个高频刚需的：
