strictStyleIsolation: true 仍漏样式,因 @import、<link>、CSS-in-JS、绝对路径404及Vite不支持experimentalStyleIsolation;需编译时加前缀、动态base、禁用全局引入、重写第三方库选择器与JS行为,并统一CSS变量/字体/动画命名空间。

styledIsolation 配置不能自动隔离子应用 CSS,它只控制 <style> 标签挂载位置,不改写选择器、不处理 @import、<link rel="stylesheet"> 或 CSS-in-JS 生成的样式——这些都会逃逸到主文档 <head>,污染全局。
为什么 strictStyleIsolation: true 还是漏样式?
这个选项强制创建 Shadow DOM 并把子应用根节点塞进去,但以下情况完全绕过劫持逻辑:
-
@import嵌套的 CSS 文件(如@import "bootstrap/scss/_variables.scss")不会被重写 -
<link rel="stylesheet">加载的外部 CSS(比如 Bootstrap、normalize.css)直接进<head> - CSS-in-JS 库(如
styled-components)动态插入的<style>标签不走标准 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/' : '/' - 检查构建产物中所有
<link href>的路径,确认与主应用注册时的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:不能给
<body>加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


















