<p>PostCSS 不处理 SCSS 文件，必须先编译为标准 CSS 再交由 PostCSS + Autoprefixer 处理；否则 display: flex 等声明不会生成 -webkit- 前缀，因 Autoprefixer 仅识别标准 CSS 语法，无视 @mixin、嵌套、变量等 SCSS 特性。</p>
PostCSS 不会处理 SCSS 文件本身，必须确保 SCSS 先编译为标准 CSS，再由 PostCSS + Autoprefixer 处理——否则你在 .scss 里写一万行 display: flex，也不会生成一个 -webkit- 前缀。
SCSS 文件为什么没加前缀？
Autoprefixer 只认识标准 CSS 语法，对 @mixin、嵌套、变量、& 选择器一概无视。它连 .scss 文件的文件头都打不开。常见错误包括：
- 直接在 VSCode 里对
style.scss手动运行 Autoprefixer 命令 → 报错或静默失败 - Vite 默认不把
.scss送进 PostCSS 流程，只走sass → css，跳过postcss-loader - Webpack 中
css-loader的importLoaders设为0，导致@import './base.scss'被它自己消化掉，postcss-loader根本收不到
Webpack 中 SCSS + Autoprefixer 的 loader 链路必须这样排
loader 顺序不是可选项，是执行链；错一位，前缀就断掉：
-
sass-loader：把.scss编译成纯 CSS 字符串 -
postcss-loader：接收上一步输出的 CSS，交给 Autoprefixer 处理 -
css-loader：解析@import和url()，但必须设importLoaders: 1，否则它不会把被引入的 CSS 往上交 -
style-loader或MiniCssExtractPlugin.loader：最后注入或提取
正确配置示例（Webpack 5+）：
立即学习“前端免费学习笔记（深入）”；
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader',
'sass-loader'
]
}]
}
Vite 5+ 下 SCSS 必须显式接入 PostCSS
Vite 默认只对 .css、.pcss、.postcss 启用内置 PostCSS；.scss 默认绕过。要让它生效，必须满足三个条件：
- 项目根目录存在
postcss.config.js（内容至少为module.exports = { plugins: [require('autoprefixer')] }） - 不要在
vite.config.ts里用css.postcss.options.plugins覆盖默认配置——这会清空内置 Autoprefixer -
@import的目标不能是public/下的文件，否则 Vite 直接原样拷贝，跳过全部构建流程
如果你用 @import './reset.css'，那个 reset.css 必须后缀是 .css 且在 src/ 下，否则照样不进 PostCSS。
browserslist 配置太新，等于“没配”
写了 gap: 1rem 却没看到 -webkit-gap？不是流程断了，而是 npx browserslist 显示你当前配置只匹配到 Safari >= 14.1 —— 它原生支持 gap，但不支持 aspect-ratio 或 inset。Autoprefixer 严格按此判断，不靠经验补。
- 别用
"last 2 versions"：Chrome 128 和 Safari 17.6 都原生支持flex，结果一个前缀都不加 - 线上项目推荐显式声明，例如：
"iOS >= 13", "Safari >= 14.1", "Chrome >= 90" - 运行
npx autoprefixer --info看哪些属性实际会被处理，比猜靠谱得多
最容易被忽略的是：Autoprefixer 只作用于构建时参与编译的源文件，对 JS 中动态拼接的样式、style 标签内联样式、或 public/ 下静态引入的 CSS 完全无感。
