strictStyleIsolation: true 仍漏样式，因 @import、、CSS-in-JS、绝对路径404及Vite不支持experimentalStyleIsolation；需编译时加前缀、动态base、禁用全局引入、重写第三方库选择器与JS行为，并统一CSS变量/字体/动画命名空间。
styledIsolation 配置不能自动隔离子应用 CSS，它只控制 标签挂载位置，不改写选择器、不处理 @import、 或 CSS-in-JS 生成的样式——这些都会逃逸到主文档 ，污染全局。
为什么 strictStyleIsolation: true 还是漏样式？
这个选项强制创建 Shadow DOM 并把子应用根节点塞进去，但以下情况完全绕过劫持逻辑：
-
@import嵌套的 CSS 文件（如@import "bootstrap/scss/_variables.scss"）不会被重写 -
加载的外部 CSS（比如 Bootstrap、normalize.css）直接进 - CSS-in-JS 库（如
styled-components）动态插入的标签不走标准 DOM 插入流程 - 子应用构建时用了绝对路径（如
/css/app.abc123.css），实际部署在/subapp-order/css/下，结果 404 + 样式不生效
Vite 子应用怎么避免 experimentalStyleIsolation 白开？
Vite 默认不支持 experimentalStyleIsolation，即使配置了也无效。必须换用编译时方案：
- 用
postcss-prefix-selector插件，在构建阶段给所有选择器加前缀，例如.btn→.subapp-order-btn - 确保
build.base动态设置：window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - 检查构建产物中所有
的路径，确认与主应用注册时的entry完全一致（协议、域名、路径都要对） - 禁用子应用里所有
import 'normalize.css'类全局样式引入，统一由主应用提供
第三方 UI 库（如 Element Plus、Bootstrap）怎么真正隔离？
不能只靠加 class 或配个选项，必须从源码层改写选择器结构：
- Element Plus：初始化时传
{ namespace: 'ep' }，同时在 SCSS 中@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep')，并注入到全局预处理器配置中 - Bootstrap：不能给
加class="bootstrap-iso"，必须用 Sass 重编译：.bootstrap-iso { @import "bootstrap/scss/bootstrap"; }，否则 CSS 文件里根本没有.bootstrap-iso .btn规则 - Bootstrap JS 组件（Modal、Dropdown）默认只认
.modal，需显式传参：new Modal(document.querySelector('.bootstrap-iso .modal')) - CSS 变量（
--bs-primary）、@font-face、@keyframes全局生效，无法加前缀，只能靠约定禁止子应用修改document.documentElement.style
真正难的不是加前缀，而是让所有静态资源路径、所有第三方库的 JS 行为、所有全局声明（变量/字体/动画）都对齐同一个命名空间上下文——漏掉任意一环，样式就可能在某个深夜上线后突然“串色”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
