直接 import 'bootstrap/dist/css/bootstrap.css' 必然污染全局，因浏览器不区分微前端，所有 CSS 全局生效；真正隔离需用 Sass 重编译套命名空间（如.bootstrap-iso { @import "bootstrap"; }），并显式修改 JS 组件选择器及 CSS 变量作用域。
直接 import 'bootstrap/dist/css/bootstrap.css' 必然污染全局
这不是配置没开对，而是浏览器根本不区分微前端——所有 link 或 @import 进来的 CSS 都是全局生效的。.btn、.container、.row 这些类名没有命名空间，谁后加载、谁特异性高，谁就覆盖别人。子应用里写 import 'bootstrap/dist/css/bootstrap.css'，等于主动把样式炸弹扔进主应用 DOM。
真正有效的隔离：用 Sass/Less 重编译并套命名空间
只给 <body> 加 class="bootstrap-iso" 没用，因为原始 Bootstrap CSS 文件里压根没写 .bootstrap-iso .btn 这种规则，浏览器根本不会匹配。
- 必须在构建阶段重编译源码：新建一个
bootstrap-iso.scss，内容为：.bootstrap-iso { @import "bootstrap/scss/bootstrap"; } - Vite 项目：在
vite.config.ts中配置css.preprocessorOptions.scss.additionalData，确保该文件被全局注入 - Webpack 项目：在
sass-loader的additionalData里同样注入 - 构建产物中所有 Bootstrap 类都会变成
.bootstrap-iso .btn、.bootstrap-iso .col-md-6等形式，天然避开全局冲突
Bootstrap JS 组件必须显式传入带前缀的选择器
重编译 CSS 只解决样式，JS 行为仍会失效——因为 Modal、Dropdown 等默认硬编码查找 .modal、.dropdown-menu，而你现在 DOM 里是 .bootstrap-iso .modal。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 不能依赖
data-bs-toggle="modal"自动触发：它只会找.modal，找不到就静默失败 - 必须改用 JS 调用方式：
new Modal(document.querySelector('.bootstrap-iso .modal')) - 所有通过选择器定位的 API（如
getOrCreateInstance）都需手动补上前缀 -
data-bs-*属性本身不支持命名空间，无法自动适配
Custom Properties（如 --bs-primary）不会被前缀影响
即使你套了 .bootstrap-iso，CSS 变量仍是全局作用域。它们不参与选择器匹配，也不受嵌套影响。
立即学习“前端免费学习笔记（深入）”；
- 如果多个子应用都用了 Bootstrap v5+，且各自重编译，
--bs-primary仍会被最后加载的那个覆盖 - 没有自动隔离机制，必须手动重定义变量作用域：比如在
.bootstrap-iso块内重新:root或使用html.bootstrap-iso限定 - 更稳妥的做法是避免复用同名变量，或在子应用初始化时动态写入 scoped 变量（如
document.documentElement.style.setProperty('--bs-primary-iso', '#0d6efd')）
实际落地时，最容易被跳过的不是编译步骤，而是 JS 组件的选择器重写和 CSS 变量的手动兜底——这两处漏掉，样式看似隔离了，交互却大面积失灵。
