PostCSS 需配合插件（如 autoprefixer、postcss-nested、postcss-preset-env）并通过构建工具或 CLI 正确接入才能生效；插件顺序、browserslist 配置、CSS 合法性及 stage 级别共同决定功能表现。
PostCSS 本身不直接提供样式功能，它是一个用 JavaScript 转换 CSS 的工具平台；真正提升效率的是插件生态——但前提是配置得当、选对插件、避开常见陷阱。
如何正确安装并加载常用 PostCSS 插件
很多人卡在第一步：装了 postcss 和插件，却没生效。根本原因是未通过构建工具（如 Webpack、Vite、Rollup）或 CLI 正确接入，或插件顺序写错。
- 必须安装
postcss+ 具体插件（如postcss-preset-env、autoprefixer、postcss-nested），仅装插件不装postcss会报Cannot find module 'postcss' - 插件顺序影响结果：
postcss-nested应在postcss-preset-env之前，否则嵌套语法无法被识别 - Vite 用户注意：默认已内置 PostCSS 支持，只需在项目根目录放
postcss.config.js，无需额外配置插件加载器
autoprefixer 不生效的三个高频原因
autoprefixer 是最常被误用的插件之一，看似开了却没加前缀，往往不是插件问题，而是目标环境或语法层面没对齐。
- 检查
browserslist配置：它决定哪些 CSS 特性需要补前缀；若package.json中browserslist写成"> 1%"，可能覆盖掉你期望的旧版 Android/iOS - CSS 写法必须“合法”：比如
display: grid能加前缀，但display: subgrid（尚未广泛支持）不会加，且部分浏览器根本不支持该特性 - 使用了预处理器（如 Sass）后直接编译为 CSS 再进 PostCSS？确保 PostCSS 运行在最终 CSS 字符串上，而非 Sass 编译前的源码
postcss-preset-env 的实用边界在哪
postcss-preset-env 能让你提前用 CSS 新特性，但它不是万能转译器——它只处理已进入标准草案阶段的语法，且转换能力取决于启用的 stage 级别。
立即学习“前端免费学习笔记（深入）”；
-
stage: 2（默认）支持custom-properties（CSS 变量）、nesting（需配合postcss-nested）、logical-properties；但不支持container-query（stage 3 才开始实验性支持） -
color-mix()、relative-color-syntax等新颜色函数需显式开启stage: 3并确认插件版本 ≥ 9.0 - 它不会模拟运行时行为：比如
:has()选择器可被解析，但旧浏览器仍不支持，需自行降级或搭配caniuse-lite做兼容性提示
真正拖慢开发效率的，往往不是没用插件，而是插件堆砌却不验证输出结果；每次改完 postcss.config.js 后，建议手动跑一次 npx postcss input.css -o output.css --config ./ 查看实际生成内容——眼见为实，比查文档更快定位是否生效。
