根本解法是用 Sass 的 $prefix 变量重命名 Bootstrap 4 的 class 前缀为 .bs4-btn 等，使其与 Bootstrap 5 隔离；必须在导入 functions 前声明 $prefix: "bs4-";Bootstrap 5 无原生 $prefix，需手动 wrapper 或局部包裹。
Bootstrap 4 和 5 同时引入时 class 名字打架怎么办
直接同时 @import 两个版本的 Bootstrap CSS，.btn、.container 这类基础 class 会互相覆盖，后加载的版本胜出——但实际效果往往是部分样式生效、部分错乱，比如栅格断点失效或按钮圆角异常。这不是“谁优先级高”的问题，而是同一 class 名被重复定义导致的不可控覆盖。
根本解法不是靠 !important 或调整加载顺序，而是让两个版本的 class 名字彻底区分开。Sass 提供了唯一可行路径：用 $prefix 变量重命名 Bootstrap 4 或 5 的所有 class 前缀，使其变成 .bs4-btn 和 .bs5-btn 这类隔离形式。
用 $prefix 重定义 Bootstrap 4 的 class 前缀（推荐改旧版）
Bootstrap 4 支持 $prefix 变量，Bootstrap 5 则默认移除了该机制（需手动 patch 或用 bootstrap/scss/functions + 自定义 wrapper）。所以更稳妥的做法是只改 Bootstrap 4 的前缀，保留 Bootstrap 5 原生行为，避免动新版源码。
- 在你自己的
_custom.scss中，**必须在@import "bootstrap/scss/functions"之前**声明：$prefix: "bs4-";
- 然后按顺序导入：
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; ...（完整导入路径） - 确保不使用预编译的
bootstrap.min.css，必须走 Sass 编译流程，否则$prefix不生效 - 注意：
$enable-responsive-font-sizes、$enable-grid-classes等开关变量仍需显式设置，它们不受$prefix影响但会影响最终输出
Bootstrap 5 怎么加命名空间？没有 $prefix 就硬套 wrapper 吗
Bootstrap 5 官方确实删掉了 $prefix，但你可以用 CSS 层叠+属性选择器模拟隔离，不过这仅适用于局部组件，不能全局 rename。真要全局加前缀，得自己写一层 wrapper：
立即学习“前端免费学习笔记（深入）”；
- 新建
_bs5-namespace.scss，内容为：bs5 { @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; // …… 导入其余模块 } - 这样生成的 class 会变成
bs5 .btn、bs5 .row，但注意：所有 HTML 必须包在<bs5></bs5>标签里，且 Flex/Grid 等依赖 display 属性的布局会因嵌套而失效 - 更实用的做法是：只对冲突严重的组件（如
modal、tooltip）用:where()或自定义 class 包裹，例如：.bs5-modal .modal { /* 覆盖规则 */ }，再配合 JS 初始化时指定 container 为.bs5-modal
为什么不用 CSS Modules 或 Shadow DOM 隔离
它们能隔离，但代价高且不匹配现有工程结构：
- CSS Modules 要求每个组件单独 import，而 Bootstrap 是全局工具集，
.btn可能在任意组件中使用，无法拆成模块粒度 - Shadow DOM 会切断伪元素（
::before）、焦点管理、position: fixed等行为，Modal、Dropdown 等组件直接不可用 - PostCSS 插件如
postcss-prefixwrap可批量加前缀，但它不识别 Sass 变量逻辑，对@include make-container()这类 mixin 生成的 class 无效，容易漏掉关键样式
真正稳定的方案只有 Sass 编译期介入：改一个变量，重编译，全量 class 名字就变了——但前提是别跳过 functions 导入时机，也别把 $prefix 写在变量文件之后，这种顺序错误在本地开发时几乎不报错，上线后才大面积失样式。
