必须在scss编译阶段用@layer+:where(.my-bs)包裹bootstrap并为js动态组件显式指定container选项，否则modal等会脱离样式作用域；@import或直接加!important均无效。
直接改 $enable-important-utilities 或加 !important 不解决命名空间问题——它只控制工具类是否带 !important，跟样式隔离无关。真正要隔离 Bootstrap 5 组件样式，必须在 SCSS 编译阶段把整套 CSS 包进一个作用域，且 JS 动态插入的 DOM 必须同步挂载到该作用域内。
为什么 .my-bs { @import "bootstrap"; } 不行
这种写法会让所有选择器变成 .my-bs .btn、.my-bs .container，看似隔离，实则埋雷：
- Bootstrap JS 组件（如
Modal、Dropdown）内部硬编码查找.modal、.dropdown-menu，找不到就静默失败 -
@import已被弃用，SCSS 官方推荐@use；用@import会导致变量/函数作用域混乱 - 媒体查询（
@media (min-width: 768px)）不受影响，但栅格计算依赖父容器宽度，若外层没加.my-bs，.col-md-6可能撑不满
正确做法：用 @layer + :where() 包裹整个 Bootstrap
这是目前最干净、可维护性最强的方式，兼顾权重控制与浏览器兼容性（Safari 15.4+ 支持）：
- 在自定义入口 SCSS 文件中写：
@layer bootstrap { :where(.my-bs) { @forward "bootstrap" with ( $body-bg: #fff, $primary: #0d6efd ); } } -
:where()不增加选择器权重，你的.btn-primary规则不会被压垮 - 所有静态 HTML 元素只要包在
<div class="my-bs">...</div>内，样式即生效 - 不改动 Bootstrap 源码，也不需要重命名所有变量，只靠构建时注入
JS 组件动态插入的 DOM 怎么套进命名空间
Modal、Tooltip、Popover 默认 append 到 document.body，脱离 .my-bs 容器，样式立刻失效：
- 初始化时显式传
container选项：new bootstrap.Modal(el, { container: '.my-bs' }); - 全局配置 Tooltip/Popover：
const tooltip = new bootstrap.Tooltip(el, { container: '.my-bs' }); - 用 data 属性时，统一加
data-bs-container=".my-bs"，否则 JS 按默认逻辑找body - 多个命名空间共存（如后台和前台）时，
container值必须唯一，避免互相污染
别漏掉 CSS 变量和响应式断点
Bootstrap 5 的 CSS Custom Properties（如 --bs-primary）是全局声明的，:where() 不影响它们：
- 变量作用域需单独处理：在
:where(.my-bs)块内重定义，或用:root.my-bs覆盖 - 断点本身不依赖选择器结构，
@media规则照常工作，但注意栅格类（.row、.col）的父容器必须有.my-bs，否则宽度计算异常 - 如果项目同时用 Vue/React，
scoped样式无法拦截 Bootstrap 的全局类，命名空间仍是唯一可靠路径
最易被忽略的是 JS 组件的 container 配置——很多人只改了 SCSS 却忘了补这一步，结果 Modal 弹出来还是裸样式。命名空间不是“设个 class 就完事”，它是个编译 + 运行时的协同动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
