autoprefixer 不处理 scss 源码，只作用于编译后的标准 css；必须确保构建链路为 sass → css → postcss → autoprefixer，且 browserslist 配置明确、loader 顺序正确（sass-loader → css-loader → postcss-loader）、importloaders ≥ 1。
Autoprefixer 不在 SCSS 编译阶段起作用，它只处理标准 CSS；所谓“优雅处理”，本质是让 sass → css → postcss → autoprefixer 链路跑通，而不是在 SCSS 里硬写一堆 @mixin 去模拟前缀逻辑。
为什么直接对 .scss 文件运行 Autoprefixer 没反应
Autoprefixer 是 PostCSS 插件，只解析标准 CSS 语法。遇到 $color、@include、@mixin 这类 SCSS 特有语法时，会直接报错或跳过——它根本不是为预处理器设计的。
- 常见错误：用 VSCode 插件对
style.scss手动运行 Autoprefixer，结果输出空白 - 更隐蔽的问题：Webpack 中
postcss-loader放在sass-loader前面，导致未编译的 SCSS 字符串被送入 Autoprefixer，构建直接崩溃 - 验证方法：在
postcss.config.js里加一行throw new Error('test')，启动构建——如果不报错，说明这个文件根本没被加载
Webpack 中 sass + autoprefixer 正常工作的最小条件
关键不是“怎么配”，而是让 CSS 输出真正流经 PostCSS。loader 链顺序和参数必须严格对齐：
-
sass-loader必须在css-loader之前，负责把.scss编译成 CSS 字符串 -
css-loader的importLoaders参数必须 ≥ 1（默认是 0），否则@import 'base.scss'产生的 CSS 不会进后续 PostCSS 流程 -
postcss-loader必须紧接在css-loader后，且其postcssOptions.plugins明确包含require('autoprefixer') - 别依赖
css-loader内置的 autoprefixer —— 它已废弃，行为不可控；显式声明才能保证版本和配置一致
browserslist 配置决定前缀加不加、加哪些
Autoprefixer 的所有行为都由 browserslist 输出的浏览器范围驱动。写模糊配置等于放弃控制权。
- 错误写法：
"last 2 versions"—— 它会匹配 IE11，导致大量冗余-ms-前缀，哪怕你实际不支持 IE - 推荐写法（放在
package.json）："browserslist": ["> 1%", "iOS >= 14.5", "Safari >= 15.4", "Chrome >= 95"] - 验证手段：
npx browserslist查看当前匹配的实际浏览器列表；npx autoprefixer --info看display: flex或backdrop-filter是否被列出
哪些场景还值得写 @mixin？
Autoprefixer 不覆盖所有情况，尤其当属性本身需「带前缀才生效」时（如 backdrop-filter、dialog 元素、scroll-behavior: smooth 在部分安卓 WebView 中），@mixin 是明确声明意图的手段，而非替代 Autoprefixer。
- Safari 17.4 仍只认
-webkit-backdrop-filter，Autoprefixer 不会把无前缀版本“强行补前缀”，你得自己写-webkit-backdrop-filter: blur(4px)，它才会在后面追加标准版 - 推荐写法：
@mixin backdrop-filter($value) { -webkit-backdrop-filter: $value; backdrop-filter: $value; }—— 顺序固定，不传参泛化，不拼字符串 - IE10/11 的
display: -ms-flexbox必须手动写，Autoprefixer 完全不处理；@mixin flex-row-center应硬编码-ms-flex-pack: center和justify-content: center，不能靠参数推导
最易被忽略的一点：Autoprefixer 只补前缀，不降级语法（比如不把 grid 转成 -ms-grid），也不处理运行时行为差异（如 iOS Safari 的 vh 压缩、sticky 嵌套失效）。这些必须靠 JS、@supports 或手动双写解决，和 Autoprefixer 无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
