postcss-loader必须在less-loader之后执行，因autoprefixer仅处理标准css字符串；若顺序错误（如置于less-loader前），将收到非法less语法而跳过或报错。
postcss-loader 必须在 less-loader 之后执行
Less 编译输出的是标准 CSS 字符串，Autoprefixer 只能处理这种格式；如果 postcss-loader 放在 less-loader 前面（比如 use: ['postcss-loader', 'less-loader']），它收到的其实是带嵌套、变量、Mixin 的原始 Less 语法，直接跳过或报错。
Webpack 中 loader 执行顺序是从右往左，所以正确写法是：
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('autoprefixer')]
}
}
},
'less-loader'
]
- 确保
postcss-loader在less-loader左侧（即数组中靠后），逻辑上才能“先编译、再加前缀” - 别用旧式
plugins字段，必须包裹在postcssOptions下，否则插件不加载 - 检查
module.rules是否同时匹配了/\.less$/和/\.css$/，漏掉.less规则就等于没生效
browserslist 配置必须真实生效
Autoprefixer 完全按 browserslist 输出前缀，不是凭经验猜测。“last 2 versions” 会拉进 IE11，但你的用户可能全是 Chrome 120+；配置不匹配，前缀就乱套。
推荐做法：
- 把
browserslist写在package.json顶层，避免多处维护 - 显式声明目标环境，例如：
"Chrome >= 95", "Safari >= 15.4", "iOS >= 16" - 运行
npx browserslist确认当前配置实际匹配哪些浏览器版本 - 运行
npx autoprefixer --info查看哪些属性会被处理（比如gap在 Safari 16.4+ 不需要前缀）
Less 源码里不能出现任何手动前缀
Autoprefixer 看到任意带厂商前缀的声明（如 display: -webkit-flex 或 transform: -moz-transform），就会放弃整条规则——包括本该加的 -ms- 或 -webkit-。
这意味着：
- 删掉所有自定义
.flex()、.transform()这类 Mixin - Less 文件里只写标准语法：
display: flex、gap: 1rem、place-content: center -
@supports块内不要写带前缀的 fallback；块外的标准声明才由 Autoprefixer 处理 - 别混用 Tailwind 或 CSS-in-JS 工具，它们可能绕过 PostCSS 流程
Vite 或 CLI 调试时容易忽略的链路断点
Vite 默认启用 PostCSS，但前提是项目根目录存在 postcss.config.js 或 .browserslistrc；Webpack 则完全依赖你手动配 postcss-loader。CLI 手动调试时，单跑 lessc src/a.less > dist/a.css 是无效的——它没经过 Autoprefixer。
实操验证方式：
- 在
postcss.config.js里故意require('xxx-missing-plugin')，启动构建：不报错说明该文件根本没被读取 - Vite 用户检查是否在
vite.config.js中覆盖了默认css.postcss配置 - CLI 调试必须串命令：
lessc src/a.less | npx autoprefixer -b ">1%, iOS >= 16" > dist/a.css - Webpack 用户确认
css-loader的importLoaders≥ 1，否则@import的 CSS 不进 PostCSS 流程
postcss.config.js 存在但未被加载，或者 browserslist 写对了却忘了运行 npx browserslist 验证实际覆盖范围。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
