直接import第三方CSS必然污染全局，因浏览器不区分微前端且类名无命名空间；有效方案是从构建源头控制作用域：Vite用postcss-prefix-selector加前缀，Webpack用css-loader modules生成哈希类名，Bootstrap需重编译源码包裹在命名空间内，Element Plus须SCSS层面重定义namespace，JS组件选择器需显式传入带前缀DOM。
直接 import 第三方 CSS 必然污染全局
浏览器根本不区分微前端，import 'bootstrap/dist/css/bootstrap.css' 或 <link rel="stylesheet"> 加载的 CSS 全部进入 document 的全局样式表。类名如 .btn、.container 没有命名空间，后加载的子应用样式会覆盖主应用，或反之——这不是 qiankun 配置没开对，而是底层机制决定的。
常见错误现象：
- 切换子应用后，按钮边框变粗、字体大小突变
- 主应用导航栏被子应用的
body { margin: 0 }重置 - Element Plus 的
.el-input__inner被 Element UI 同名类覆盖，输入框失焦时无反馈
真正有效的做法不是“禁用”或“延迟加载”，而是从构建源头控制选择器作用域：
- Vite 子应用：必须用
postcss-prefix-selector插件为所有 CSS 规则加前缀（如.subapp-order .btn） - Webpack 子应用：可配合
css-loader?modules+localIdentName生成哈希类名，但需同步修改 JS 中引用的 className - 绝对禁止在子应用中直接
import未处理的第三方 CSS 文件
Bootstrap 类名隔离不能只靠 body class
给 <body class="bootstrap-iso"> 然后指望原始 Bootstrap CSS 自动生效，是无效的。因为 bootstrap.css 编译产物里压根没有 .bootstrap-iso .btn 这种规则，浏览器根本不会匹配。
立即学习“前端免费学习笔记（深入）”；
必须在构建阶段重编译源码：
- 新建
bootstrap-iso.scss，内容为：.bootstrap-iso { @import "bootstrap/scss/bootstrap"; } - Vite 项目：通过
css.preprocessorOptions.scss.additionalData注入该文件 - Webpack 项目：配置
sass-loader的additionalData选项
这样生成的 CSS 才会把所有类包裹进 .bootstrap-iso 块内，比如 .bootstrap-iso .btn、.bootstrap-iso .row。但注意：--bs-primary 这类 CSS 变量仍是全局的，需手动在 .bootstrap-iso 内重新定义，例如：.bootstrap-iso :root { --bs-primary: #0d6efd; }
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
Element Plus 必须启用 namespace 编译
Element Plus 默认类名以 el- 开头，若多个子应用都用它，或与 Element UI 共存，.el-button 就会互相覆盖。仅靠运行时加 class 或 postcss 替换前缀不可靠，容易漏掉变量、动画、伪类等。
正确路径是 SCSS 层面强制重定义命名空间：
- 创建
src/styles/element-namespace.scss：@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'); - Vite 中通过
css.preprocessorOptions.scss.additionalData全局注入该文件 - 确保
@use 'element-plus/theme-chalk/src/var.scss'也被引入，否则--ep-color-primary等变量不会生成
效果是所有类变成 ep-button、ep-input，且配套变量、图标、动画全部对应更新。不这么做，JS 组件（如 ElMessage）内部仍会查找 .el-icon，导致图标不显示。
JS 组件选择器必须显式传入带前缀的 DOM
重编译 CSS 只解决样式，JS 行为仍失效。Bootstrap 的 Modal 默认找 .modal，但现在 DOM 里是 .bootstrap-iso .modal；Element Plus 的 ElTooltip 默认绑定 .el-tooltip，而你实际类名已是 ep-tooltip。
不能依赖 data-bs-toggle="modal" 或 v-if 自动触发，它们不会识别前缀：
- Bootstrap：改用
new Modal(document.querySelector('.bootstrap-iso .modal')) - Element Plus：初始化时传入
namespace: 'ep'（Vue 插件方式），或调用ElMessage({ customClass: 'ep-message' }) - 所有
getOrCreateInstance、getInstance类 API 都要手动补上前缀选择器
最容易被忽略的是：CSS Custom Properties 和 JS 获取的 computedStyle 不受前缀影响，getComputedStyle(el).getPropertyValue('--bs-primary') 仍读全局值，得靠 document.querySelector('.bootstrap-iso').style.getPropertyValue('--bs-primary') 或动态写入 scoped 变量兜底。
