less编译不加前缀，需通过postcss的autoprefixer插件在css阶段处理；webpack中应配置less-loader→postcss-loader→css-loader顺序，并在postcss.config.js中正确设置autoprefixer。
Less编译时加前缀，靠的是插件不是CSS本身
Less本身不处理浏览器前缀，autoprefixer 也不是Less内置功能。你写的 .box { display: flex; } 编译后还是没前缀，除非额外接入兼容性处理环节。
主流做法是把 Less 编译和 Autoprefixer 拆成两步：先用 lessc 或构建工具编译出 CSS，再用 autoprefixer 扫一遍。直接在 Less 插件里“自动加前缀”属于常见误解。
- Less 官方插件生态里没有稳定可靠的
less-plugin-autoprefix（已多年未维护，不支持现代 CSS 特性） - Webpack 中用
less-loader+postcss-loader+autoprefixer是目前最稳的链路 - Vite 默认集成 PostCSS，只要项目根目录有
postcss.config.js就会自动生效，无需动 Less 配置
Webpack 项目中让 Less 输出带前缀的 CSS
关键不是改 Less，而是确保 CSS 流水线经过 autoprefixer。重点检查三处：
-
less-loader的additionalData或implementation参数和前缀无关，别在这儿折腾 -
postcss-loader必须在less-loader之后、css-loader之前（顺序错就白配） -
autoprefixer配置要写在postcss.config.js里，不能只丢在package.json的browserslist
示例 postcss.config.js：
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead']
})
]
}
用 CLI 手动编译 Less 并补上前缀
适合小项目或临时调试，但不能替代构建流程。命令链必须串起来，漏掉任一环都会没前缀：
- 先运行
lessc src/style.less > dist/style.css - 再运行
npx autoprefixer -b "> 1%, last 2 versions" dist/style.css -o dist/style.css - 注意
-b参数必须显式指定，否则按默认规则（只覆盖 IE10+），可能漏掉旧版 Safari 或 Android Browser - Windows 命令行中重定向符
>会清空原文件，建议加--replace或分两步写入临时文件
为什么有时候加了前缀还是不生效
常见真因不是工具没跑，而是语义或语法卡住了 autoprefixer：
- 写了
display: -webkit-flex这种手动前缀，autoprefixer会跳过整条声明（认为你已接管） - 用了尚未进入标准的实验语法，比如
gap: 10px在 Flex 布局中，旧版 Autoprefixer 不识别，得升级到 v10+ 并确认目标浏览器支持 -
browserslist配置被多处覆盖：.browserslistrc、package.json、postcss.config.js 三者冲突时以 postcss.config.js 为准，但 Webpack 的postcss-loader若传了options会覆盖它 - Less 中嵌套过深导致生成的 CSS 选择器超出 Autoprefixer 处理范围（极少见，但复杂 mixin 可能触发）
真正麻烦的点往往藏在配置叠加和工具链顺序里，而不是 Less 写法本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
