Less 4.0 不处理浏览器前缀，需靠 postcss-loader（在 less-loader 右侧）处理标准 CSS；browserslist 必须显式配置且覆盖目标浏览器；源码中禁用手动前缀；sourceMap 需两端同时开启。
Less 4.0 本身不支持 autoprefixer，也根本不处理浏览器前缀——你配置的不是 Less，而是构建链路中紧接在它之后的 PostCSS 步骤。
less-loader 必须在 postcss-loader 右侧（即后执行）
Webpack 的 use 数组从右往左执行，但逻辑顺序必须是：Less 源码 → 编译为标准 CSS → 交给 PostCSS 处理。常见错误是把 postcss-loader 写在 less-loader 左边，导致它收到的是未编译的 Less 语法，直接跳过或报错。
- ✅ 正确顺序：
['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] - ❌ 错误顺序：
['style-loader', 'css-loader', 'less-loader', 'postcss-loader']——postcss-loader拿不到合法 CSS - ⚠️ 注意：若用对象写法配置
postcss-loader，必须确保postcssOptions包裹插件，否则旧版 Webpack 可能忽略plugins字段
browserslist 配置必须显式且生效
Autoprefixer 完全依赖 browserslist 判断是否加前缀。Less 4.0 不读取它，但 autoprefixer() 会。默认规则（如 > 0.5%, not dead）可能漏掉 Safari 12、Android Browser 4.4 或 IE11。
- ✅ 推荐写法：在
package.json中添加"browserslist"字段，或建.browserslistrc文件，内容如：> 1%、last 2 versions、not dead - ❌ 废弃写法：
require('autoprefixer')({ browsers: ['IE >= 10'] })—— 2023 年后已失效，会警告且不生成任何前缀 - ⚠️ 验证是否生效：运行
npx browserslist，确认输出包含你目标浏览器；若为空或范围过窄，autoprefixer就不会加前缀
Less 源码里不能出现任何手动前缀
Autoprefixer 看到任意厂商前缀（如 display: -webkit-flex 或 transform: -ms-transform），就会放弃整条声明——它认为“你已接管兼容性”。这比配置错误更隐蔽，因为编译不报错，但前缀就是不出现。
- ✅ 正确写法：只用标准语法，例如
display: flex、gap: 1rem、@supports (place-content: center) - ❌ 错误写法：删掉所有
.flex()、.transform()这类 Mixin；禁用@-webkit-keyframes等手写前缀块 - ⚠️ 特别注意：
@supports块内不要写带前缀的 fallback；块外的标准声明才由autoprefixer处理
sourceMap 断裂会导致调试困难
Less 编译 + PostCSS 处理是两步，若任一环节 sourceMap 关闭或路径不一致，Chrome 开发者工具里点击样式就定位不到原始 .less 行号。
- ✅ 必须同时开启：
less-loader的sourceMap: true，以及postcss-loader的sourceMap: true - ❌ 若用 CLI 手动串联（
lessc→postcss），必须加--map参数并确保 map 文件路径匹配，否则调试时看到的是中间 CSS 文件 - ⚠️ Vite 用户可省略大部分配置：只要装了
autoprefixer并设好browserslist，它会自动识别并注入，无需改 Less 相关配置
真正容易被忽略的是：前缀是否生成，和 Less 版本几乎无关；关键在于 postcss-loader 是否真收到了标准 CSS 字符串，以及 browserslist 是否覆盖了你的真实用户环境。哪怕用了 Less 4.0，如果 postcss-loader 被配在 .css 规则里却漏掉了 .less，或者 browserslist 里写了 last 1 version 却要兼容 IE11，结果都一样——没前缀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
