Less 不加浏览器前缀是因为 Autoprefixer 未正确启用：需卸载过时的 less-plugin-autoprefix，确保 postcss-loader 紧接 less-loader 后执行，并清理手动前缀与兼容性 Mixin；Autoprefixer 仅补前缀，不降级语法，IE 兼容需显式处理。
Less 本身不加任何浏览器前缀，你看到没前缀，不是配置漏了，而是 Autoprefixer 没跑起来，或者根本没作用在正确的位置上。
为什么 less-plugin-autoprefix 必须删掉
这个插件最后一次更新是 2016 年，硬编码浏览器数据，不认识 gap、@supports、CSS 变量等现代语法；它读不到你的 .browserslistrc，也不响应 Webpack 或 Vite 的目标环境。你写 .box { display: flex; }，它可能输出已废弃的 -webkit-flex，白加还增大体积。更关键的是：它对 Less 编译后的真实 CSS 结构不可见（比如嵌套展开、Mixin 展开后），前缀容易加错位置或直接缺失。
清单式处理：
- 卸载：
npm uninstall less-plugin-autoprefix - 检查
webpack.config.js或vue.config.js中是否残留plugins: [require('less-plugin-autoprefix')]配置 - 确认 VS Code 插件、CLI 脚本里没有调用
lessc --plugin=autoprefix类命令
postcss-loader 必须紧接 less-loader 之后
Webpack loader 执行顺序是从右往左，但逻辑链必须是：Less 源码 → 编译成标准 CSS 字符串 → Autoprefixer 处理 → css-loader 解析。如果 postcss-loader 写在 less-loader 左边（即数组里位置靠前），它收到的是未编译的 Less 语法（如 &:hover、@{var}），直接报错或静默跳过。
立即学习“前端免费学习笔记（深入）”；
✅ 正确写法（module.rules 中）：
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
},
'less-loader'
]
❌ 错误写法：['less-loader', 'postcss-loader'] 或只给 /\.css$/ 配了 postcss-loader 却漏掉 /\.less$/
额外检查点：
- 拼写必须是
postcss-loader，不是postcss-load或post-css-loader - 确保
postcssOptions存在且包裹plugins，旧版plugins字段可能被忽略 - 运行
npx browserslist确认当前生效的浏览器列表是否含Safari 12、IE 11等关键目标
Less 源码里必须清空所有手动前缀和兼容性 Mixin
Autoprefixer 看到任何带厂商前缀的声明（如 display: -webkit-flex 或 transform: -moz-transform），就会认为“你已接管”，整条声明直接跳过——包括本该补的 -ms- 或 -webkit-。
立即清理动作：
- 删掉所有自定义
.flex()、.transform()类 Mixin，例如：.flex() { display: -webkit-box; display: -ms-flexbox; display: flex; } - Less 文件中只保留标准语法：
display: flex、gap: 1rem、place-content: center -
@supports块内不要写带前缀的 fallback；块外的标准声明才由 Autoprefixer 处理
特别注意：手写 -webkit-gap 不仅无效，还会让 Safari 直接忽略整条 gap 声明。
IE 等老浏览器不支持的特性必须手动降级
Autoprefixer 只补前缀，不降级语法。var(--x)、gap、display: grid 在 IE 全系中根本无法解析，加前缀毫无意义。
可行降级方式：
-
var(--color)→ 改用 Less 变量：@primary-color: #007bff;，编译后直接输出值 -
display: grid→ IE10–11 用display: -ms-grid+-ms-grid-columns，不能靠 Autoprefixer 生成 -
gap→ 改用margin或封装为.grid-gap(@size)，内部用margin实现 -
aspect-ratio→ 无 CSS 替代方案，需 JS 或 padding-top 技巧兜底
所有降级逻辑必须显式写出，不能指望构建工具自动推导；同时，这些降级代码要和 browserslist 配置对齐，否则你写的 IE 补丁，可能正被 Autoprefixer 在下游悄悄删掉。
