less本身不支持自动添加浏览器前缀，必须由postcss+autoprefixer在编译后处理标准css；其原因在于less仅做语法转换，不解析语义或查兼容表，且无运行时环境。
Less 本身不支持、也不能实现自动化浏览器前缀补全——所有“自动”都必须发生在 Less 编译完成之后，由 PostCSS + Autoprefixer 处理标准 CSS 时完成。
为什么 Less 编译器从不加前缀
Less 只做语法转换：变量替换、嵌套展开、Mixin 调用。它不解析 transform 或 flex 的语义，也不查浏览器兼容表。你写 display: flex;，它就原样输出一行；不会插入 -webkit-box、-ms-flexbox 等任何前缀。
常见错误现象：.box { display: flex; } 在 Safari 9 或 IE10 下完全无效，控制台却无报错——因为样式被忽略，而非报错。
- Less 没有运行时环境，无法根据目标浏览器动态决定加哪些前缀
- 所谓“Less 插件自动加前缀”（如
less-plugin-autoprefix）早已停止维护，硬编码过时规则，且不读.browserslistrc - 手写
.flex()这类 Mixin 是静态、有限、易过时的兜底方案，不是自动化
Webpack 中必须确保 postcss-loader 在 less-loader 之后
Autoprefixer 是 PostCSS 插件，只处理标准 CSS AST。它收不到 Less 源码，也看不懂 @mixin 或 & 嵌套。
正确 loader 执行链（use 数组从右往左）应为：
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
},
'less-loader'
]
- ❌ 错误：把
postcss-loader放在less-loader左侧（即先执行），它会收到未编译的 Less 语法，直接跳过或报错 - ❌ 错误：只给
/\.css$/配了postcss-loader，但/\.less$/规则里漏了它 - ✅ 验证方式：构建后打开生成的 CSS 文件，搜索
-webkit-flex或-ms-flexbox；没出现，说明链路断了
browserslist 配置决定是否加前缀、加什么前缀
Autoprefixer 完全依赖 browserslist 输出结果来判断兼容性需求。写 display: flex; 却没生成前缀？大概率是你的目标浏览器范围已不需要它了。
必须显式配置，且不能用已废弃的 browsers 字段：
- ❌
require('autoprefixer')({ browsers: ['IE >= 10'] })—— 2023 年后失效，会警告且不工作 - ✅ 推荐：项目根目录建
.browserslistrc，内容如：last 2 versions > 1% iOS >= 13 Safari >= 14.1
- ✅ 临时调试可用
overrideBrowserslist，但别长期混用 - ⚠️ 运行
npx browserslist查看实际匹配的浏览器列表，再跑npx autoprefixer --info看哪些属性会被处理
Less 文件里写了前缀，Autoprefixer 就会彻底跳过
Autoprefixer 的设计原则是：“你手动写了前缀，就代表你接管了兼容性控制权”。一旦它在 CSS 中看到 display: -webkit-flex; 或 .flex() { display: -ms-flexbox; }，整条声明都会被跳过，不再补任何其他前缀。
- 必须删掉所有手写的厂商前缀，包括 Mixin 里硬编码的
-webkit-、-ms-等 - 不要用
@value或变量拼接带前缀的值，Autoprefixer 不解析变量，只处理静态声明 - 如果用了
postcss-preset-env，关掉它的内置 Autoprefixer，否则和你手动 require 的冲突 - Vite 用户注意：它默认启用 PostCSS，但只读
postcss.config.js或.browserslistrc，不认 Webpack 风格的 loader 配置
最常被忽略的一点：前缀是否生成，和 Less 写法无关，只取决于构建链路是否完整、browserslist 是否精准、以及源 CSS 中是否混入了手动前缀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
