less 必须先经 less-loader 编译为标准 css，再由 postcss-loader 处理；loader 顺序应为 ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']，且需同时覆盖 .less 和 .css 文件，browserslist 配置须准确并清除缓存生效。
Less 必须先编译成标准 CSS，PostCSS 才能正确处理；顺序错一个 loader，autoprefixer 就收不到合法输入，直接静默跳过或报 Unknown word 错误。
less-loader 和 postcss-loader 的执行顺序必须是 less → postcss
Webpack 的 use 数组从右往左执行，但逻辑流程必须是：Less 源码 → 编译为标准 CSS 字符串 → PostCSS 插件（如 autoprefixer）处理 → css-loader 解析。所以针对 .less 文件的 rule，loader 链必须写成：
['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
常见错误是把 postcss-loader 放在 less-loader 右侧（即后执行），比如 ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']——此时 postcss-loader 收到的是含 @mixin、&:hover、@color 的原始 Less 语法，不是合法 CSS AST，autoprefixer 直接跳过，postcss-nested 也因前置条件不满足而失效。
还要确认：这个 loader 链是否同时覆盖了 /\.less$/ 和 /\.css$/？很多项目只给 .css 配了 postcss-loader，却漏掉 .less 规则，导致 Less 文件完全不走 autoprefixer。
删掉所有手动前缀和兼容性 mixin
autoprefixer 看到任何带厂商前缀的声明（如 display: -webkit-flex），就会整条规则放弃处理——它认为你已接管兼容性控制权。这不是“没生效”，而是主动退出。
- 删掉所有类似
display: -webkit-box; display: -ms-flexbox;的多行写法，只保留display: flex; - 清空自定义的
.flex()、.clearfix()这类封装前缀的 mixin，它们不仅冗余，还会干扰autoprefixer对最终属性的识别 - 避免在
@value或变量拼接中塞入带前缀的值，比如@flex-value: "-webkit-flex";，autoprefixer不解析变量，只处理静态声明
browserslist 决定加哪些前缀，不是 autoprefixer 自己猜
autoprefixer 完全依赖 browserslist 配置输出结果。写 display: flex 却没生成 -webkit-flex，大概率是目标浏览器范围已不需要它了（比如只支持 Safari >= 14.1）。
优先把配置写在 package.json 的 browserslist 字段里，避免多处维护：
"browserslist": ["Safari >= 14.1", "iOS >= 13", "Chrome >= 90"]
运行 npx browserslist 查看当前匹配的实际浏览器版本，再跑 npx autoprefixer --info 看哪些属性会被处理。别用模糊表达如 "last 2 versions"，它可能拉入已淘汰的 Safari 12，导致不必要的前缀污染。
Vite 和 CLI 构建时的特殊行为要单独验证
Vite 默认启用 PostCSS，但只在项目根目录读取 postcss.config.js 或 .browserslistrc；如果你的 Less 文件在子目录下，且没在根目录放配置，就等于没开 autoprefixer。
而直接用 lessc input.less > output.css 这种 CLI 单步编译，根本不会触发 PostCSS——它绕过了整个构建链路。这种输出只能用于调试，不能进生产包。
最容易被忽略的一点：改完 browserslist 或 postcss.config.js 后，必须清空构建缓存（如 Webpack 的 node_modules/.cache、Vite 的 .vite），否则旧结果会一直复用，你以为配对了，其实压根没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
