bootstrap 5 css无法被沙箱拦截，因其通过import引入生成或动态绕过qiankun劫持路径，且js组件运行时注入的样式不受监控；根本解法是构建时用sass重编译并加命名空间前缀。
因为 Bootstrap 5 的 CSS 是纯全局选择器，浏览器不区分微应用上下文，所有规则直接进入同一张全局样式表，后加载的 input、.btn、body 规则会无条件覆盖主应用或其他子应用的同名样式。
Bootstrap 5 的 CSS 为什么无法被沙箱拦截
qiankun 的 experimentalStyleIsolation 只能劫持标准 DOM 插入路径（如 document.head.appendChild(styleEl)），但 Bootstrap 5 通常通过以下方式注入，完全绕过沙箱：
- Webpack/Vite 构建时以
import 'bootstrap/dist/css/bootstrap.min.css'方式引入 → 最终生成<link rel="stylesheet">或动态<style></style>标签插入document.head，Vite 子应用中该过程不可劫持 - HTML Entry 场景下，Bootstrap 的
<style></style>被DOMParser解析后直接挂载进容器，卸载时不会自动移除 - JS 组件（如
Modal）运行时动态插入的<style></style>（例如bootstrap/js/dist/modal.js内部逻辑）根本不在沙箱监控范围内
污染的具体表现不是“样式没生效”，而是“错乱覆盖”
典型现象包括：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
input、button、table等原生标签重置被强制应用，导致<el-input></el-input>内部的<input class="el-input__inner">同时匹配input.form-control（权重 0,0,2,1）和你的 scoped 规则，后者常被划掉 -
body { margin: 0; font-size: 1rem; }直接重置主应用排版基准，z-index 层级体系崩塌 - 多个子应用都引入 Bootstrap，后加载的那个会把前一个的
.modal-backdrop、.dropdown-menu全部覆盖，弹窗定位/遮罩失效
构建时加命名空间是唯一可控入口
不能依赖运行时拦截，必须在 CSS 产出阶段切断全局性。有效做法只有：
- 用 Sass 重编译源码：
.subapp-order { @import "bootstrap/scss/bootstrap"; }，确保所有规则带前缀，且构建后检查产物中不存在裸露的.btn或input规则 - 同步改造 JS 组件调用：原
new Modal(document.querySelector('.modal'))→ 改为new Modal(document.querySelector('.subapp-order .modal')) - 禁用
<link rel="stylesheet">，改用 JS 动态加载后注入到子应用容器内（如container.appendChild(styleEl)），并确保该styleEl在卸载时被显式remove() - 注意：CSS Custom Properties（如
--bs-primary）不会被前缀影响，若需隔离，必须在 :root 中也加命名空间作用域（如.subapp-order :root）
真正难处理的从来不是怎么加前缀，而是那些没被你控制的第三方 JS 动态插入的 <style></style> —— 它们一旦进 document.styleSheets，就和主应用平权竞争，且卸载时几乎没人主动清理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
