PostCSS本身不加前缀，autoprefixer才负责添加；但autoprefixer必须被构建工具真正加载，且CSS必须完整流经其处理链路——90%的“没加前缀”问题源于这两步失效。
PostCSS 本身不加前缀，autoprefixer 才干这事；但 autoprefixer 必须被真正加载，且你的 CSS 必须流经它——90% 的“没加前缀”问题，卡在这两步。
确认 postcss.config.js 是否真被构建工具读取
很多项目有 postcss.config.js，但构建时根本没执行它。Vite 5+ 默认启用 PostCSS，但如果你在 vite.config.js 里写了 css.postcss 字段，反而会屏蔽默认行为；Webpack 则完全依赖你手动配 postcss-loader，漏一个环节就失效。
- 在
postcss.config.js第一行加require('xxx-missing')，重启构建 —— 不报错 → 文件未被加载 - Vite 要求配置文件必须在项目根目录，且不能是
.cjs或.mjs（除非显式指定） - Webpack 中，
postcss-loader必须排在css-loader之后，且css-loader的importLoaders≥ 1，否则@import进来的 CSS 不进 PostCSS 流程 - Vue CLI 默认集成，但只对
<style lang="postcss">生效；普通<style>块需确认 loader 链中是否含postcss-loader
检查 browserslist 配置是否精准匹配真实目标
autoprefixer 完全按 browserslist 输出前缀，不是靠经验猜。写 "last 2 versions" 可能给 Safari 12 加 -webkit-，但它早已原生支持 gap；写 "> 1%" 却可能拉进 IE11，生成一堆 -ms-，而你的项目根本不支持 IE。
- 把
browserslist写在package.json里，避免.browserslistrc和 CI 环境不一致 - 别用
autoprefixer插件内的overrideBrowserslist参数（已废弃） - 线上项目推荐显式声明，例如：
"iOS >= 16.4"、"Safari >= 14.1"、"Chrome >= 90" - 运行
npx browserslist看实际匹配哪些浏览器；再跑npx autoprefixer --info确认backdrop-filter、gap等属性是否真会被处理
理解 autoprefixer 的能力边界：它只加前缀，不转译语法
autoprefixer 不会把 gap: 1rem 降级成 margin 模拟，也不会把 place-items: center 拆成 align-items + justify-items；反过来，IE11 的 display: -ms-grid 和现代 grid 差异极大，加了前缀也不等于能用。
立即学习“前端免费学习笔记（深入）”；
- 写了
aspect-ratio: 1/1没任何前缀 → 正常，caniuse 显示该属性无主流前缀需求 - Flex
gap在旧 Safari 错乱？这不是前缀问题，是gap本身不被支持，得用flex-gap-polyfill这类插件做 CSS 层模拟 - 想用
@nest嵌套语法？必须装postcss-nesting（v10+），不是postcss-nested - Bootstrap 的
bootstrap.min.css是预编译结果，直接引入就绕过了 PostCSS —— 必须走源码编译（如@import "bootstrap/scss/bootstrap"）
最易被忽略的点：你写的 CSS 是否真的进了 PostCSS 流水线。哪怕配置全对，只要某处 @import "xxx.css" 引入的是已压缩的成品 CSS，那部分就永远收不到前缀。别只看配置文件是否存在，要验证每一行样式是否真实流经 autoprefixer。
