Autoprefixer未生效的四大原因：一是postcss-loader顺序错误，应为['style-loader','css-loader','postcss-loader','less-loader']；二是Less中手动写了厂商前缀导致Autoprefixer跳过处理；三是browserslist未覆盖真实目标浏览器；四是构建流程未实际调用PostCSS。
postcss-loader 顺序写反了，Autoprefixer 根本没收到 CSS
Webpack 的 rule.use 是从右往左执行，但逻辑链必须是：Less 编译 → PostCSS 处理 → CSS 解析。如果配置成 ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']，postcss-loader 就会收到未编译的 Less 语法（比如 &:hover 或变量），直接报错或静默跳过。
✅ 正确顺序：['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
✅ 同时检查 module.rules 是否给 .less 文件也配了 postcss-loader —— 很多人只给 .css 配了，漏掉 .less 规则。
Less 里写了手动前缀，Autoprefixer 主动放弃了整条声明
只要你在 Less 中写了任何带厂商前缀的值，比如 display: -webkit-flex、transform: -moz-transform，Autoprefixer 就认为“你已接管兼容逻辑”，立刻跳过这条声明，不再补任何前缀——哪怕它本该加 -ms- 或第二个 -webkit-。
- 删掉所有自定义 Mixin，例如
.flex() { display: -webkit-box; display: -ms-flexbox; display: flex; } - Less 文件里只保留标准写法：
display: flex、gap: 1rem、place-content: center - 特别注意
@supports块内不要写带前缀的 fallback；块外的标准声明才由 Autoprefixer 处理
browserslist 没覆盖真实目标浏览器
Autoprefixer 加不加前缀、加哪些前缀，完全取决于 browserslist 配置。默认规则如 > 0.5%, not dead 很可能漏掉你实际要支持的 Safari 12、iOS 15.4 或 IE11。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 运行
npx browserslist看当前配置实际匹配哪些浏览器版本 - 把
browserslist显式写在package.json里，避免多处维护 - 国内项目慎用模糊语法，优先写具体版本：
"iOS >= 16.4", "Safari >= 14.1", "Chrome >= 90" - IE11 要生效，必须同时满足：
browserslist包含IE >= 11，且 Autoprefixer 配置启用flexbox: '2009'
构建流程压根没走 PostCSS，Autoprefixer 根本没运行
Autoprefixer 不是装完就生效的开关，它只在构建阶段被 PostCSS 调用，且 CSS 必须流经它的处理链。很多项目有 postcss.config.js，但构建工具根本没读取它。
快速验证方法：
- 在
postcss.config.js里加一行require('xxx-missing-plugin')，启动构建——不报错就说明该文件没被加载 - Vite 5+ 默认启用 PostCSS，但如果你在
vite.config.js中显式写了css.postcss，反而会覆盖默认行为 - Vue 单文件组件中，
<style>默认不走 PostCSS，必须用<style lang="postcss">或确认 loader 链路完整 - React 项目若用
create-react-app，它只处理.css和.module.css，.less需额外配postcss-less
最常被忽略的一点：Autoprefixer 对 grid、gap、aspect-ratio 这类属性是否加前缀，完全取决于 caniuse 数据库的当前状态——它不猜、不降级、不模拟，只按需补前缀。写了个新属性却没前缀，先查 npx autoprefixer --info，别急着改配置。
