Autoprefixer 必须在 Sass 编译后运行，因其仅处理标准 CSS 字符串，依赖 browserslist 动态添加前缀；错误 loader 顺序、browserslist 配置不当或手写前缀均会导致失效。
Autoprefixer 不处理 Sass 源码，只作用于编译后的 CSS；它不会读 @mixin、不解析 $variable、也不关心你写了多少层嵌套——它只扫描标准 CSS 属性，按 browserslist 动态加前缀。想靠 Sass 自动解决兼容性，方向就错了。
Autoprefixer 为什么必须在 Sass 编译之后运行
Autoprefixer 是 PostCSS 插件，输入是纯 CSS 字符串，输出也是 CSS 字符串。Sass 编译器（如 sass CLI 或 sass-loader）输出的是未加前缀的标准 CSS，这正是 Autoprefixer 的唯一入口点。
- 你在
.scss里写display: flex，Sass 编译后仍是display: flex—— 此时没前缀，也没错 - Autoprefixer 接收到这个 CSS 后，查
browserslist，发现需支持 iOS Safari 12.4，才补上display: -webkit-flex和display: -ms-flexbox - 若把 Autoprefixer 放在 Sass 前面（比如误配在
sass-loader之前），它根本收不到任何 CSS，自然什么也不做
Webpack 中常见 loader 顺序错误导致前缀失效
loader 执行顺序是从右到左，use 数组里靠后的 loader 先执行。错误配置会让 CSS 绕过 Autoprefixer。
-
css-loader必须设importLoaders: 1或更高，否则@import进来的 Sass 输出的 CSS 不会进后续 loader - 正确链路应为：
sass-loader→css-loader→postcss-loader（含 Autoprefixer）→style-loader - 若
postcss-loader被漏掉、或写在css-loader前面，display: flex就永远只是display: flex - Vite 用户注意：
css.postcss在vite.config.js中显式声明会覆盖默认配置，导致 Autoprefixer 不加载
browserslist 配置不对，Autoprefixer 就等于没开
Autoprefixer 加不加前缀、加哪些，100% 取决于 browserslist 输出的浏览器列表，不是你写的 CSS 决定的。
立即学习“前端免费学习笔记（深入）”；
-
"last 2 versions"会让 Chrome 120 也加-webkit-，纯属冗余；"not dead"不包含 IE，所以-ms-前缀永远不会出现 - 要支持 IE 11，必须显式写
"IE 11"；要让 iOS Safari 14.5 有-webkit-clip-path，就得写"iOS >= 14.5" - 验证方式：运行
npx browserslist看实际匹配列表，再跑npx autoprefixer --info查属性支持状态 -
postcss.config.js里的browsers参数已废弃，优先级低于browserslist，别用
别在 Sass 里手写前缀或封装 vendor mixin
手写 -webkit-transform 或定义 @mixin vendor($prop, $val) 是反模式，既不可靠又难维护。
-
-webkit-display是非法语法，Sass 编译直接报错；gap在旧 Safari 需-webkit-gap，但flex-wrap不需要，混合宏无法区分 - Compass 时代的
@include flex已淘汰：它硬编码前缀组合，不随浏览器演进更新，也无法响应browserslist变化 - Autoprefixer 遇到已有前缀（如你手写的
-moz-appearance）默认跳过，既不优化也不警告，容易造成冗余或遗漏 - 真正该写的只有标准 CSS：
backdrop-filter: blur(5px)，其余交给 Autoprefixer 判断
最常被忽略的其实是构建产物验证——别只看开发服务器热更新时有没有前缀，得打开打包后的 dist/*.css 文件，逐行确认 display、transform、gap 等关键属性是否按目标浏览器生成了对应前缀。没验证，就等于没配成功。
