autoprefixer 不在 scss 编译阶段生效，仅作用于 sass 编译后的标准 css；它依赖 browserslist 配置，通过 postcss 插件运行，需确保构建流程中 sass → css → postcss → autoprefixer 链路完整贯通。
Autoprefixer 不在 SCSS 编译阶段起作用，它只处理 Sass 编译后的标准 CSS；所谓“在 SCSS 里优雅加前缀”，本质是确保构建链路把 sass → css → postcss → autoprefixer 这一环跑通，而不是写一堆 @mixin 去硬编码前缀。
Autoprefixer 为什么对 .scss 文件完全无效
Autoprefixer 是 PostCSS 插件，只解析标准 CSS 语法。遇到 $color、@include、@mixin 这类 SCSS 特有语法时，直接报错或跳过——它根本不是为预处理器设计的。
- 常见错误：用 VSCode 插件对
style.scss手动运行 Autoprefixer，结果无反应或输出空白——因为插件底层调的是autoprefixerCLI，而 CLI 不接受 SCSS 输入 - 更隐蔽的问题：你在
postcss.config.js里写了require('autoprefixer')，但构建流程没把 SCSS 编译后的 CSS 送进去，比如 Webpack 中postcss-loader放在sass-loader前面，就会尝试处理未编译的 SCSS 字符串，直接崩溃 - 验证方法：临时在
postcss.config.js里加一行throw new Error('test')，启动构建——如果不报错，说明这个文件根本没被加载
Webpack 中 sass + autoprefixer 正常工作的最小条件
关键不是“怎么配”，而是让 CSS 输出真正流经 PostCSS。Webpack 的 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是否被处理 - 注意：
place-items在 Safari 15.4 原生支持，Autoprefixer 就不会加任何前缀；但backdrop-filter在 Safari 17.4 仍需-webkit-，这时就得靠@mixin手动补 —— 它不是替代，而是补充
什么时候该写 @mixin，什么时候坚决不能写
SCSS @mixin 不是“自动加前缀”的捷径，而是针对 Autoprefixer 无法覆盖的特殊场景做明确声明。
- 该写的情况：
backdrop-filter、scroll-behavior: smooth、dialog元素等，属性本身需要带前缀才生效，且 Autoprefixer 不会为无前缀版本“生成”前缀版本 - 正确写法：
@mixin backdrop-filter($value) { -webkit-backdrop-filter: $value; backdrop-filter: $value; }—— 顺序固定，不拼字符串，不泛化参数 - 坚决不能写的情况：
@mixin vendor($prop, $val)这类动态拼接；@mixin flex-center这类固化 IE10 逻辑却忽略目标浏览器已不含 IE 的 mixin；它们编译期就定死，既冗余又易错 - 真正可靠的前缀来源只有一个：Sass 编译后的真实 CSS 经过 Autoprefixer 处理的结果，而不是你写的 SCSS 源码里有没有
-webkit-
最容易被忽略的不是插件怎么装，而是 browserslist 是否真实生效、构建链路中 CSS 是否真的流经 postcss-loader。打开最终生成的 dist/main.css，搜索 flex 或 transform，看到的才是真相。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
