Autoprefixer未生效的根本原因是postcss-loader顺序错误、Less语法未编译、手动前缀干扰、browserslist配置缺失或cssnano误删前缀，需确保loader顺序正确、输入为标准CSS、清除显式前缀、精准配置browserslist并禁用cssnano内置Autoprefixer。
postcss-loader 顺序写反了，Autoprefixer 根本没收到 CSS
Less 文件编译成标准 CSS 是 less-loader 的事，Autoprefixer 只认纯 CSS 字符串，不认 &:hover、@{var} 这类 Less 语法。如果 postcss-loader 写在 less-loader 前面（比如 ['postcss-loader', 'less-loader']），它收到的就是未编译的 Less 源码，直接报错或静默跳过。
Webpack loader 执行顺序是从右往左，所以正确写法必须是：
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']- 确保
postcss-loader紧跟在less-loader输出之后、css-loader解析之前 - 检查
module.rules是否只给.css配了postcss-loader，却漏掉了.less规则
Less 里写了手动前缀，Autoprefixer 主动放弃了整条声明
只要你在 .box { display: -webkit-flex; } 或 .btn { transform: -moz-scale(1); } 这类写法中出现任意一个厂商前缀，Autoprefixer 就判定“你已接管”，整条声明直接跳过——包括本该补的 -ms-、-webkit-。
必须清空所有显式前缀和兼容性 Mixin：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有类似
.flex() { display: -webkit-box; display: -ms-flexbox; display: flex; }的 Mixin - Less 中只保留标准语法：
display: flex、gap: 1rem、place-content: center - 特别注意
@supports块内内容：Autoprefixer 不处理块内声明，只处理块外 fallback
browserslist 配置没覆盖目标浏览器，前缀自然不生成
Autoprefixer 加不加前缀、加哪些前缀，完全取决于 browserslist 查询 Can I Use 的结果。写 "last 2 versions" 不会为 Safari 12 补 -webkit-，因为 Safari 12 已原生支持 flex；但如果你项目真要支持 IE11，而配置里没写 "IE >= 11"，display: flex 就不会出 -ms-flexbox。
验证方式很简单：
- 运行
npx browserslist，确认输出包含你要支持的旧版 Safari、Android Browser 或 IE11 - 根目录建
.browserslistrc，内容如：last 2 versions<br>>1%<br>IE 11<br>Safari >= 12
- 别在
postcss.config.js里用已弃用的browsers参数，例如require('autoprefixer')({ browsers: [...] })会警告且失效
cssnano 或其他 PostCSS 插件误删了前缀
开发环境有前缀、构建后消失？大概率是 cssnano 在压缩阶段启用了内置 Autoprefixer，并用自己的 browserslist 配置把“冗余”前缀删了——它和你配的不一致，甚至默认认为 -ms-flexbox 是多余的。
解决方法很直接：
- 禁用
cssnano内置 Autoprefixer：{ preset: ['default', { autoprefixer: false }] } - 确保
autoprefixer插件在postcss.config.js中排在cssnano之前 - 构建后清掉缓存，尤其 Webpack 的
.cache目录或 Vite 的node_modules/.vite
