直接import或link css必然导致污染，因浏览器全局解析这些样式，qiankun的styledisolation仅劫持动态标签，不处理和@import引入的外部css文件，故子应用样式会逃逸并覆盖主应用。
为什么直接 import 或 link CSS 必然导致污染
浏览器不管你是微前端还是单页应用，<link rel="stylesheet"> 和 @import 加载的 CSS 就是全局生效的。qiankun 的 styledIsolation 配置对它们完全无效——它只劫持动态插入的 <style></style> 标签，不处理外部文件请求。你看到子应用按钮样式覆盖了主应用，不是隔离没开对，是这些样式根本就没进沙箱。
常见错误现象：
- 子应用
import 'bootstrap/dist/css/bootstrap.css'，结果主应用所有.btn全变样 - 构建产物里出现
<link href="/css/app.abc123.css">，但实际资源在/subapp-order/css/app.abc123.css，404 后样式全丢 - 两个子应用都
import 'normalize.css'，DOM 里出现两份 identical 的<style></style>，加载顺序决定谁赢
必须改用 JS 动态加载 + 容器内注入
子应用所有非组件级 CSS（包括 UI 框架、重置样式、第三方库）都不能走 HTML 静态引入，得在 JS 中控制加载时机和作用域。
实操建议：
- 移除所有
<link rel="stylesheet">和全局import，改用loadScript或fetch + insertRule动态加载 - 拿到 CSS 文本后，用
postcss-prefix-selector加唯一前缀（如.subapp-order），再创建<style></style>标签 - 不 append 到
document.head，而是container.appendChild(styleEl)，确保样式只作用于子应用容器 DOM 子树 - 对
@font-face、@keyframes等全局规则，需手动提取并重写为带前缀的版本，否则仍会泄漏
UI 框架类名必须从源头改写，不能只靠 CSS 前缀
Element Plus 的 .el-button 和 Ant Design Vue 的 .ant-btn 这类默认类名，即使加了容器前缀（如 .subapp-order .el-button），仍可能被后加载的同名规则覆盖——因为权重相同，浏览器按加载顺序决定最终效果。
关键参数差异：
- ElementPlus：初始化时传入
{ namespace: 'ep' }，类名变成ep-button，不是.subapp-order .el-button - 同步修改 SCSS 变量：新建
src/styles/element/index.scss，内容为@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'); - Vite 需配置
css.preprocessorOptions.scss.additionalData，Webpack 需配sass-loader.additionalData，确保该 SCSS 全局注入 - Bootstrap 类名隔离不能只给
加 class，必须用 Sass 重编译源码：.bootstrap-iso { @import "bootstrap/scss/bootstrap"; }
构建配置必须匹配运行时路径，否则 404 是常态
子应用 CSS 文件若用绝对路径（如 /css/app.abc123.css），嵌入主应用后会向根域请求，而实际部署在子应用专属路径下（如 /subapp-order/css/app.abc123.css），结果就是 404 + 样式完全不生效。
实操要点：
- Webpack 子应用：设置
publicPath为运行时动态值，例如process.env.NODE_ENV === 'production' ? '/subapp-order/' : '/' - Vite 子应用：配置
build.base，同样区分环境，window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - 构建后必须检查
dist目录下所有<link href>的路径，确认与主应用registerMicroApps中注册的entry字符串完全一致 - 禁用子应用重复引入基础样式（如
normalize.css），由主应用统一提供并 scoped 到自身容器
真正麻烦的不是加前缀，而是那些逃逸出劫持逻辑的样式：CSS-in-JS 生成的 <style></style>、JS 拼字符串后 innerHTML 注入、@import 嵌套、以及所有未被 PostCSS 处理的伪类和属性选择器。它们不会自动带上容器前缀，也不会被 shadowRoot 拦截——得靠构建时插件+运行时重写双保险，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
