根本原因是postcss.config.js未被读取、browserslist未匹配目标浏览器或css未进入postcss流程；需验证配置加载、精准设置browserslist、确保css文件经postcss处理链。
PostCSS 8 中 Autoprefixer 不自动补前缀，根本原因不是版本不兼容，而是配置未真正接入构建流程——90% 的“失效”问题出在 postcss.config.js 没被读取、browserslist 匹配不到目标浏览器、或 CSS 文件压根没走 PostCSS 处理链。
postcss.config.js 是否真被构建工具加载？
PostCSS 8 不再自动查找配置文件；Vite 5+、Webpack 5+ 等工具虽默认支持，但极易被显式配置覆盖或忽略。
- 在
postcss.config.js里写require('xxx-missing-plugin')，启动 dev server —— 若不报错，说明该文件根本没被读取 - Vite 用户：必须把
postcss.config.js放在项目根目录；若在vite.config.ts中写了css.postcss.options.plugins，会完全覆盖内置 Autoprefixer，需手动加require('autoprefixer') - Webpack 用户：
postcss-loader必须排在css-loader之后，且css-loader的importLoaders至少为1，否则@import的 CSS 不进 PostCSS 流程
browserslist 配置是否精准匹配真实目标？
Autoprefixer 补什么前缀，完全由 browserslist 决定。写 "last 2 versions" 在 2026 年会导致大量冗余（如 Chrome 128 不需要 -webkit-），而漏掉 "iOS >= 16.4" 又会让 backdrop-filter 缺失 -webkit-。
- 必须把
browserslist字段写在package.json里，避免.browserslistrc和 CI 环境不一致 - 运行
npx browserslist查看当前配置实际命中哪些浏览器（例如输出含ios_saf 16.4才代表 Safari 16.4 会被处理） - 运行
npx autoprefixer --info看display: flex、gap等属性是否被标记为 “needs prefix”——不是所有属性都有前缀需求
CSS 文件是否真实进入 PostCSS 处理链？
Autoprefixer 只处理源码级 CSS，对 public/ 下的文件、JS 中动态插入的样式、或未编译的 .scss 均无感知。
- Vite 默认只处理
.css（非public/下）、.pcss、.postcss；@import './base.css'中的base.css必须也在src/下，且后缀为.css - SCSS 用户：Autoprefixer 不解析
.scss，必须确保构建链是sass-loader → css-loader → postcss-loader；css-loader的importLoaders: 1是硬性要求 - Vue 单文件组件中，
<style></style>默认不走 PostCSS，要写成<style lang="postcss"></style>或确认 loader 链路含postcss-loader
为什么开发环境有前缀、生产构建却没了？
大概率是 cssnano 在压缩阶段误删了前缀——它内置的 Autoprefixer 逻辑与你配置的不一致，且默认开启。
- 在
postcss.config.js中使用cssnano时，必须显式禁用其内置前缀功能：cssnano({ autoprefixer: false }) - 清理构建缓存（Vite 的
node_modules/.vite，Webpack 的node_modules/.cache），旧缓存可能保留错误的处理结果 - 检查是否有多个 PostCSS 实例：Webpack 5+ 的
css-loader自带 PostCSS，若再配postcss-loader可能导致重复执行或配置被忽略
最容易被忽略的是：Autoprefixer 只响应构建时的静态 CSS 源码，它不关心你在 DevTools 里改了什么，也不处理 JS 动态生成的样式规则——哪怕你写了 el.style.display = 'flex'，它也完全无感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
