autoprefixer 不处理 Less 源文件,需确保 postcss-loader 在 less-loader 之后执行、配置 browserslist 并避免手动前缀;错误顺序、漏配 .less 规则、混用前缀或缓存未清均会导致前缀缺失。

Less 本身不加前缀,autoprefixer 也从不处理 .less 源文件——它只对标准 CSS 字符串生效。你看到的“没前缀”,90% 是因为构建链路没把 autoprefixer 接在 Less 编译之后、CSS 解析之前。
Webpack 中 postcss-loader 顺序写错
loader 执行顺序是从右往左,但逻辑上必须是:Less 编译 → PostCSS 处理 → CSS 解析。常见错误是把 postcss-loader 放在 less-loader 左边(即数组里写在前面),结果它收到的是未编译的 Less 语法,直接跳过或报错。
- ✅ 正确写法:
['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] - ❌ 错误写法:
['style-loader', 'css-loader', 'less-loader', 'postcss-loader']——postcss-loader收不到合法 CSS - 检查
module.rules是否只给.css配了postcss-loader,漏掉了.less规则
写了手动前缀,autoprefixer 就自动放弃整条声明
autoprefixer 看到任何带厂商前缀的声明(比如 display: -webkit-flex 或 transform: -moz-transform),就会认为“你已接管”,不再补任何前缀——包括本该加的 -ms- 或 -webkit-。
- 删掉所有自定义
.flex()、.transform()这类 Mixin - Less 文件里只保留标准语法:
display: flex、gap: 1rem、place-content: center - 特别注意
@supports块内不要写带前缀的 fallback;块外的标准声明才由autoprefixer处理
browserslist 配置没生效或覆盖不全
autoprefixer 加什么前缀,完全取决于 browserslist。默认规则(如 > 0.5%, not dead)可能漏掉你真实要支持的 Safari 12、Android Browser 4.4 或 IE11。
立即学习“前端免费学习笔记(深入)”;
- 运行
npx browserslist查看当前实际生效的浏览器列表 - 根目录建
.browserslistrc,内容示例:last 2 versions<br>>1%<br>iOS 12<br>IE 11
- 避免在
postcss.config.js的plugins里重复写browsers字段(已弃用),也不要混用逻辑如"last 2 versions, not dead",会导致 IE11 被包含又被排除
最容易被忽略的是:你改了 .browserslistrc 却没清构建缓存,或者 postcss-loader 根本没读到这个文件——它只在项目根目录或通过 postcss.config.js 显式配置时才生效。


















