PostCSS未处理Bootstrap预编译CSS导致前缀缺失，需源码编译并确保构建链路正确；browserslist须精准匹配真实机型；Bootstrap 4/5混用引发class冲突；autoprefixer不处理语法降级与运行时限制。
PostCSS根本没跑进Bootstrap的CSS里，补前缀就是空谈
绝大多数“Bootstrap没加前缀”的问题，不是Autoprefixer配置错了，而是PostCSS压根没处理到你的Bootstrap样式。Bootstrap 4/5 的 bootstrap.css 是预编译好的纯CSS文件，直接引入它就绕过了整个PostCSS流程——autoprefixer 插件根本碰不到这些代码。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别用
bootstrap.min.css或 CDN 链接，必须走源码编译：对 Bootstrap 4，用 Sass 编译入口_bootstrap.scss；对 Bootstrap 5，用@import "bootstrap/scss/bootstrap" - 确认构建工具链里 CSS 文件真进了 PostCSS：Webpack 中
css-loader的importLoaders必须 ≥ 1，否则@import进来的 Bootstrap Sass 输出 CSS 不会再进postcss-loader - Vite 项目若在
vite.config.js里写了css.postcss字段，反而会屏蔽默认 PostCSS 加载——删掉该字段，让 Vite 自动读取postcss.config.js
browserslist 配置不匹配真实手机环境，前缀就加得南辕北辙
写 "last 2 versions" 看似保险，但 iOS Safari 更新慢、Android WebView 版本碎片化严重，你的真实用户可能卡在 ios_saf 16.4 或 and_uc 14.4，而配置却拉进了 Safari 18，结果该加的 -webkit-backdrop-filter 没加，不该加的 -ms-grid 却塞了一堆。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
browserslist写死在package.json里，避免.browserslistrc和 CI 环境不一致 - 国内项目慎用
> 1%：iOS 15.0 全球占比仍超 1%，但它在部分 iPhone SE 上对aspect-ratio支持不稳定，应显式写"iOS >= 16.4" - 运行
npx browserslist看输出是否真含你要覆盖的机型；再跑npx autoprefixer --info确认backdrop-filter、gap等属性是否被标记为“需要前缀”
Bootstrap 4 和 5 混用时，autoprefixer 处理不了 class 名冲突
autoprefixer 只管 CSS 属性前缀，不管 class 名。Bootstrap 4 和 5 同时 @import，.btn、.row 这类 class 会互相覆盖——后加载的版本胜出，但栅格断点、间距变量全乱套，这不是前缀问题，是命名空间污染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Bootstrap 4 改前缀：在自定义 Sass 文件中，必须在
@import "bootstrap/scss/functions"之前 声明$prefix: "bs4-"，然后完整导入所有模块 - Bootstrap 5 不支持原生
$prefix，不能靠变量改；要么只用 v5、弃用 v4，要么手动用 CSS wrapper 包裹旧版组件，比如.legacy-bs4 { @import "bootstrap4"; } - 绝对不要混用预编译 CSS 文件，哪怕加了
autoprefixer，class 覆盖已发生，前缀补得再全也没用
某些 CSS 特性 autoprefixer 根本不处理，必须手动兜底
autoprefixer 只做前缀注入，不做语法降级。它不会把 gap: 1rem 拆成 margin 模拟，也不会给 vh 单位加 JS 修正，更识别不了 position: sticky 在 iOS 15.4 以下嵌套失效这种运行时限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
backdrop-filter在 iOS 15.4+ 才稳定支持-webkit-backdrop-filter：在postcss.config.js中显式传参overrideBrowserslist: ["ios_saf >= 15.4"] -
vh在 iOS Safari 地址栏收放时被压缩：用 JS 注入--vh: 100vh并监听resize动态更新，autoprefixer完全不动单位 -
sticky嵌套失效：不能指望前缀解决，得用@supports (position: sticky)降级为position: relative+ JS 滚动监听
require('autoprefixer') 耗时得多。 
