为 less 配置 autoprefixer 的关键是将 postcss-loader 紧接在 less-loader 之后，确保其处理编译后的标准 css；需删除手动前缀和兼容性 mixin，依赖 browserslist 精确控制目标浏览器，并清空构建缓存以生效。
Less 本身不加浏览器前缀，autoprefixer 也根本不会处理 .less 源文件——它只作用于编译后的标准 CSS 字符串。所以“为 Less 配置前缀”，本质是把 autoprefixer 正确塞进 Webpack/Vite 的构建链路里，让它在 less-loader 输出之后、css-loader 解析之前运行。
postcss-loader 必须紧接在 less-loader 之后
Webpack 的 use 数组执行顺序是从右往左，但逻辑流程必须是：Less 源码 → 编译成标准 CSS → autoprefixer 加前缀 → css-loader 解析。顺序错一个位置，autoprefixer 就收不到有效输入。
- ✅ 正确写法（适用于
.less文件）：['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] - ❌ 错误写法：
['style-loader', 'css-loader', 'less-loader', 'postcss-loader']—— 此时postcss-loader收到的是未编译的 Less 语法（比如&:hover），直接报错或静默跳过 - ⚠️ 常见漏配：只给
.css规则配了postcss-loader，但module.rules里对/\.less$/的 rule 没包含它
Less 文件里不能有手动前缀或兼容性 mixin
autoprefixer 看到任何带厂商前缀的声明，就会整条跳过。这不是“没生效”，而是它主动放弃了——你写了 display: -webkit-flex，它就认为你在接管兼容性控制权。
- 删掉所有类似
display: -webkit-box; display: -ms-flexbox;的手动写法，只保留display: flex; - 清空自定义
.flex()这类 mixin，它们不仅冗余，还会干扰autoprefixer对最终声明的识别 - 避免在 Less 变量或
@value中拼接带前缀的值，autoprefixer不解析变量，只处理静态属性声明
browserslist 配置决定加哪些前缀
autoprefixer 完全按 browserslist 输出结果来决定是否加前缀、加什么前缀。写 display: flex 却没生成 -webkit-flex，大概率是你的目标浏览器范围已经不需要它了。
- 优先把配置写在
package.json的browserslist字段里，避免多处维护 - 别用模糊表达如
"last 2 versions"，它可能拉入已淘汰的 Safari 12；推荐显式写"Safari >= 14.1"或"iOS >= 13" - 运行
npx browserslist查看当前匹配的实际浏览器版本，再跑npx autoprefixer --info看哪些属性会被处理
Vite 和 CLI 调试时的特殊处理
Vite 默认启用 PostCSS，但只在根目录读取 postcss.config.js 或 .browserslistrc；而 CLI 单步编译 lessc input.less > output.css 根本不走 PostCSS 流程。
- Vite 项目中，确保
postcss.config.js在项目根目录，且内容导出对象（不是空对象或module.exports = {}） - 调试时别用
lessc直出 CSS，要串起来：lessc src/a.less | npx autoprefixer -b ">1%, last 2 versions" > dist/a.css - 如果用了
postcss-preset-env，记得关掉它的内置autoprefixer，否则和你手动 require 的冲突
最容易被忽略的点是：你改了 postcss.config.js 或 browserslist，但没清构建缓存，或者 loader 顺序写对了却漏配了 .less 规则——这些都会导致 autoprefixer 彻底不运行，而不是“加得不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
