PostCSS无法处理直接引入的bootstrap.min.css，必须通过Sass源码编译并确保构建链路完整：@import "bootstrap/scss/bootstrap"、css-loader设importLoaders≥1、browserslist精准匹配真实机型、严禁Bootstrap 4/5混用。
PostCSS根本不会处理你直接引入的bootstrap.min.css——补前缀的前提是让Bootstrap源码走完PostCSS流程。
必须用Sass源码编译，别碰预编译CSS文件
Bootstrap 4 的 bootstrap.min.css 是构建好的终态文件，PostCSS 插件（包括 autoprefixer）完全接触不到它。你引入它，就等于跳过了整个 PostCSS 流程。
- 正确做法：在自定义 Sass 文件中，
@import "bootstrap/scss/bootstrap"（注意路径指向node_modules/bootstrap/scss/） - 确保你的构建工具（Webpack/Vite）把该 Sass 文件作为入口，经
sass-loader→css-loader→postcss-loader链路处理 - 删掉所有对
bootstrap.min.css或 CDN 链接的@import/<link>，它们和 autoprefixer 无关
Webpack里css-loader的importLoaders必须≥1
即使你写了 @import "bootstrap/scss/bootstrap"，如果 css-loader 没告诉 Webpack “后续还要把 @import 进来的 CSS 再喂给 postcss-loader”，那 Bootstrap 的 Sass 输出内容仍不会进 PostCSS。
- Webpack 5+ 中，
css-loader默认启用 PostCSS，但仅限主 CSS 文件；@import的内容需显式开启二次处理 - 配置示例：
{ loader: 'css-loader', options: { importLoaders: 2 } }（2 表示先过 postcss-loader，再过 sass-loader？不对——应为：1 表示过 postcss-loader 一次；若链路含 sass-loader，则需 ≥2） - 更稳妥写法：把
postcss-loader放在css-loader之后、且css-loader的importLoaders设为1，确保所有@import的 CSS 都进 PostCSS
browserslist必须覆盖真实目标机型，不能只写“last 2 versions”
autoprefixer 完全按 browserslist 查 caniuse 数据库决定加不加前缀。写 "last 2 versions" 可能拉进 Safari 18，却漏掉大量仍在用 iOS 16.4 的 iPhone SE 用户——结果 backdrop-filter 没加 -webkit-，页面直接失效。
立即学习“前端免费学习笔记（深入）”；
- 国内项目推荐写死：
"iOS >= 16.4", "Android >= 12", "Chrome >= 95", "Samsung >= 18" - 把
browserslist字段写进package.json顶层，避免.browserslistrc和 CI 环境不一致 - 运行
npx browserslist看输出是否含你要支持的版本；再跑npx autoprefixer --info确认flex-wrap、gap等关键属性是否被标记为“需要前缀”
别混用Bootstrap 4和5，否则class冲突比前缀问题更致命
autoprefixer 只管属性前缀，不管 class 名。如果你同时 @import v4 和 v5 的 Sass，.btn、.row、$grid-breakpoints 全部冲突——后加载的版本胜出，栅格系统彻底错乱。
- 若必须共存：Bootstrap 4 部分需提前声明
$prefix: "bs4-"，并在@import "bootstrap/scss/functions"之前设置 - Bootstrap 5 不支持
$prefix变量改名，强行混用只能靠 CSS wrapper 隔离，例如.legacy-bs4 { @import "bootstrap4"; } - 前缀缺失只是表象；class 覆盖才是真崩溃点，且 autoprefixer 完全无能为力
最容易被忽略的是：你改了 postcss.config.js，但构建工具根本没读它——先用 require('xxx-missing-plugin') 故意报错验证是否加载，再谈前缀。
