qiankun微前端样式隔离需分场景施策：vite子应用不支持experimentalstyleisolation，须用postcss-prefix-selector加前缀；主应用全局样式需手动加命名空间；element plus等ui库须通过scss配置自定义namespace并全局注入；bootstrap等第三方css必须重编译嵌套命名空间块，且js组件需显式传入带前缀选择器。
直接在子应用里 import 或 <link rel="stylesheet"> 全局 CSS（比如 Bootstrap、normalize.css、Ant Design 样式）几乎必然导致样式污染——这不是配置没开对，而是浏览器根本不管你是微前端还是单页应用，CSS 就是全局生效的。
子应用构建时必须重写静态资源路径
子应用 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/' : '/' - 构建后检查产物中所有
<link href>的路径，确认与主应用注册子应用时的entry域名/路径一致
UI 框架样式必须加命名空间，不能只靠 import
Vue2 + ElementUI 和 Vue3 + ElementPlus 共存时，.el-input__inner 这类共享前缀类名会被后加载的样式直接覆盖，输入框边框消失、按钮颜色错乱——沙箱拦不住，因为规则已写进 DOM。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- ElementPlus：在
main.ts初始化时传入{ namespace: 'ep' }，让类名变成ep-button、ep-input - 同步修改 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 就完事
给 加 class="bootstrap-iso" 没用，因为原始 Bootstrap 编译出的 CSS 里压根没有 .bootstrap-iso .btn 这样的规则，浏览器根本不会匹配。
- 真正有效的是用 Sass 重编译源码：
.bootstrap-iso { @import "bootstrap/scss/bootstrap"; } - Bootstrap JS 组件（Modal、Dropdown）默认只认
.modal、.dropdown-menu，必须显式传入带前缀的选择器：new Modal(document.querySelector('.bootstrap-iso .modal')) - CSS Custom Properties（如
--bs-primary）不会被命名空间包裹，多个子应用共用会互相覆盖；解决方案只有两个：每个子应用独立编译并重定义变量，或放弃 CSS 变量、改用传统 Sass 变量 + 编译时注入
qiankun strictStyleIsolation 的真实能力边界
strictStyleIsolation: true 看起来是银弹，但实际会暴露三类硬伤：
- 子应用用
ReactDOM.createPortal或el.append()挂到document.body的节点，会脱离 Shadow DOM，样式瞬间失效 - 主子应用之间通信必须走
CustomEvent+ 自定义事件总线，写法比普通 DOM 复杂一倍 - 第三方 UI 库（如 Ant Design）挂载到
document.body的浮层，样式被外部规则穿透，strictStyleIsolation完全不拦截
真正难的从来不是选哪种方案，而是所有子应用是否统一构建配置、是否禁用 !important、是否约束第三方库的挂载点——这些细节没人帮你检查，出问题时也不会报错，只会默默让页面变丑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
