autoprefixer不能直接处理less源码，必须在less-loader之后、css-loader之前通过postcss-loader介入，且仅作用于编译后的标准css；browsers配置已弃用，须改用overridebrowserslist或统一的.browserslistrc文件。
Autoprefixer 能自动为 Less 编译后的 CSS 补全厂商前缀，但必须确保它在 less-loader 之后、css-loader 之前运行；否则会漏处理或报错。
postcss-loader 必须放在 less-loader 之后
Less 是预处理器，它把 .less 编译成标准 CSS 字符串，而 Autoprefixer 是后处理器，只作用于最终的 CSS AST。如果 postcss-loader 放在 less-loader 前面，它收到的是未编译的 Less 语法（比如嵌套、变量），直接报错或跳过。
- 正确顺序：
MiniCssExtractPlugin.loader→css-loader→postcss-loader→less-loader❌（错） - 正确顺序：
MiniCssExtractPlugin.loader→css-loader→less-loader→postcss-loader✅（推荐） - 更稳妥写法：用
postcssOptions包裹插件配置，避免旧版plugins字段被忽略
autoprefixer 的 browsers 配置已弃用，改用 overrideBrowserslist 或 browserslist
2023 年起，autoprefixer({ browsers: [...] }) 会触发警告并失效。新版必须用 overrideBrowserslist，或者更推荐——统一收口到 .browserslistrc 或 package.json 的 browserslist 字段。
- 错误写法：
require('autoprefixer')({ browsers: ['last 2 version'] }) - 临时兼容写法：
require('autoprefixer')({ overrideBrowserslist: ['last 2 version', '>1%', 'iOS 10'] }) - 推荐做法：在项目根目录建
.browserslistrc，内容为：last 2 versions<br>>1%<br>iOS 10
- 这样所有工具（Babel、PostCSS、eslint-plugin-compat）都能复用同一份目标浏览器声明
Less 文件里写 display: flex 不会触发 autoprefixer 处理？检查 loader 执行链是否断裂
常见现象是 Less 中写了 display: flex，但构建后 CSS 里没出现 -webkit-flex 等前缀。大概率是 postcss-loader 没生效，原因包括：
-
postcss-loader被漏加进use数组，或拼写错误（比如写成postcss-load） - Webpack 配置中
test: /.less$/规则匹配了，但postcss-loader只配在.css规则里，没覆盖.less - 用了
postcss-preset-env却没关掉它的 autoprefixer（它默认启用），导致和手动 require 的冲突 - Less 文件里用了
@value或mixins动态生成属性名，Autoprefixer 不解析变量，只处理静态声明
为什么 postcss.config.js 有时不生效？优先级和加载时机问题
postcss.config.js 在 Webpack 场景下容易被忽略，因为 postcss-loader 的 options 会覆盖它。也就是说，只要你在 loader 里写了 postcssOptions，postcss.config.js 就不会读取。
- 想用
postcss.config.js：删掉postcss-loader的options，让它自动查找配置文件 - 想集中控制：直接在
postcss-loader里写postcssOptions，更明确，也避免多层配置互相覆盖 - 注意
postcss.config.js导出必须是module.exports = { plugins: [...] }，不能是export default（ESM 无效）
最易被忽略的一点：Autoprefixer 不处理 Less 编译前的语法，也不处理运行时动态插入的样式；它只对 Webpack 构建时产出的静态 CSS 文件生效。如果你在 JS 里用 document.styleSheets 插入字符串样式，前缀得自己加或换用其他方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
