less本身不支持自动加前缀，真正起作用的是postcss-loader+autoprefixer在less编译为css后的处理；必须确保loader顺序正确（less-loader在postcss-loader之前）、postcssoptions包裹插件、browserslist精准配置且生效、less源码中禁用所有手动前缀。
Less 本身不支持自动加前缀，所谓“Less 插件配置”是常见误解；真正起作用的是 postcss-loader + autoprefixer 在 Less 编译成标准 CSS 后的处理环节——顺序错、规则漏、配置废，前缀就彻底消失。
Webpack 中 postcss-loader 必须在 less-loader 之后执行
Autoprefixer 只能解析合法 CSS 字符串，无法识别 @variable、嵌套或 .mixin()。如果 postcss-loader 出现在 less-loader 左侧（即数组中更靠前），它收到的就是原始 Less 源码，直接跳过或报错。
- ✅ 正确顺序（loader 从右往左执行）：
['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] - ❌ 错误顺序：
['style-loader', 'css-loader', 'less-loader', 'postcss-loader']——postcss-loader根本收不到 CSS - ⚠️ 注意：必须确保
module.rules的test: /\.less$/规则里包含postcss-loader，只配/\.css$/是无效的
postcss-loader 配置必须用 postcssOptions 包裹插件
旧版写法 plugins: ['autoprefixer'] 在 Webpack 5+ 中可能被忽略，尤其搭配 postcss-loader@6+ 时。
- ✅ 推荐写法：
postcssOptions: { plugins: [require('autoprefixer')] } - ❌ 危险写法：
plugins: [require('autoprefixer')]（无postcssOptions包裹） - ❌ 已废弃写法：
require('autoprefixer')({ browsers: [...] })—— 会触发警告且完全不生效
browserslist 配置必须显式生效且匹配真实用户环境
Autoprefixer 加什么前缀，完全取决于 browserslist。写 "last 2 versions" 可能拉进 IE11，但你的用户全是 Chrome 120+，结果就是该加的 Safari 前缀没加，不该加的 IE 前缀反而塞了一堆。
- ✅ 推荐做法：在项目根目录建
.browserslistrc，内容如：> 1%<br>Safari >= 15.4<br>iOS >= 16<br>Chrome >= 95
- ✅ 验证是否生效：
npx browserslist看实际匹配的浏览器列表 - ✅ 查看某属性是否会被处理：
npx autoprefixer --info | grep gap - ❌ 别把
browserslist写在package.json里又忘了清缓存，Vite/Webpack 可能读不到
Less 源码里不能出现任何手动前缀
只要 Autoprefixer 在某条声明里看到任意厂商前缀（比如 display: -webkit-flex 或 transform: -moz-transform），它就会放弃整条规则——包括本该补的 -ms- 或 -webkit-。
- ❌ 删除所有自定义
.flex()、.transform()Mixin - ✅ Less 文件只写标准语法：
display: flex、gap: 1rem、place-content: center - ❌
@supports块内不要写带前缀的 fallback；块外的标准声明才由 Autoprefixer 处理 - ⚠️
less-plugin-autoprefix已停更近十年，硬编码浏览器数据，不读.browserslistrc，现代属性（如gap、CSS 变量）完全不识别，别用
最容易被忽略的一点：构建后没前缀，第一反应不该是“插件没装好”，而是立刻运行 npx browserslist 和 npx autoprefixer --info ——90% 的问题出在目标环境和实际配置脱节，而不是代码写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
