直接import全局CSS必然导致样式覆盖，因浏览器不区分微应用且规则进入同一全局表；Vite子应用中experimentalStyleIsolation无效，因其CSS通过JS动态插入head，沙箱无法劫持；必须用postcss-prefix-selector构建时加前缀，Element Plus需同步配置namespace与SCSS变量注入。
直接在子应用里 import 全局 CSS（比如 bootstrap.css 或 element-plus/dist/index.css）必然导致覆盖，这不是配置没开对，而是浏览器根本不管“这是哪个微应用的样式”——所有规则都进同一张全局样式表，后加载的赢。
为什么 qiankun 的 experimentalStyleIsolation 对 Vite 子应用基本无效？
Vite 构建时，CSS 是通过 import 'xxx.css' 触发 JS 动态插入 <style></style> 标签到 document.head，qiankun 的沙箱劫持不到这个过程。你看到的 experimentalStyleIsolation: true 实际只对 Webpack 的 style-loader 注入路径起作用。
- 验证方式：打开 DevTools → Elements → 搜索
.btn，如果看到裸露的未加前缀的选择器，说明隔离失效 - Vite 子应用必须放弃依赖该配置，改用构建时插件干预
- Webpack 子应用可配合
css-loader?modules，但需同步改写 JS 中所有className引用
如何用 postcss-prefix-selector 给 Vite 子应用加选择器前缀？
这是目前最稳定、侵入最小的方案：它在构建阶段重写所有 CSS 规则，把 .btn 变成 .subapp-order .btn，让样式只在子应用容器内生效。
- 在子应用根目录配
postcss.config.js：module.exports = { plugins: [ require('postcss-prefix-selector')({ prefix: '.subapp-order', exclude: [/node_modules/, /normalize\.css/] }) ] } -
exclude必须排除node_modules和重置类库（如normalize.css），否则会把第三方规则也套上双层前缀，导致失效 - 确保子应用挂载容器有对应 class：
<div id="subapp-order" class="subapp-order"></div>
Element Plus 类名冲突必须从命名空间和 SCSS 双路打穿
只改 app.use(ElementPlus, { namespace: 'ep' }) 不够——JS 渲染出 .ep-button，但 SCSS 编译产物里还是 .el-button，因为变量没同步覆盖。
立即学习“前端免费学习笔记（深入）”；
- 新建
src/styles/element-namespace.scss：@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ( $namespace: 'ep' ); @use 'element-plus/theme-chalk/src/var.scss';
- Vite 配置中通过
css.preprocessorOptions.scss.additionalData全局注入该文件 - 检查最终 CSS 文件：搜索
.ep-button和--ep-color-primary，两者都必须存在；若只有前者，说明 SCSS 变量未生效
子应用禁用全局 CSS 导入是硬性红线
任何 import 'xxx.css' 或 <link rel="stylesheet"> 都不能出现在子应用代码或 HTML 中，包括 reset.css、字体、图标字体等。
- 主应用统一提供基础样式（如 normalize + 字体定义 + 基础 CSS 变量），子应用只消费不引入
- 子应用若需局部 UI 库样式，必须走 CSS Modules（
Button.module.css）或 scoped（Vue）+::v-deep穿透控制 - 构建产物中检查
index.html，确认无<link href="/css/...>%EF%BC%9B%E8%8B%A5%E6%9C%89%EF%BC%8C%E8%AF%B4%E6%98%8E%E6%9E%84%E5%BB%BA%E9%85%8D%E7%BD%AE%E6%BC%8F%E4%BA%86%E7%A7%BB%E9%99%A4%20public%20path%20%E6%88%96%E6%9C%AA%E5%90%AF%E7%94%A8%E5%8A%A8%E6%80%81%E8%B5%84%E6%BA%90%E6%B3%A8%E5%85%A5 %0A
%E7%9C%9F%E6%AD%A3%E9%9A%BE%E7%9A%84%E4%B8%8D%E6%98%AF%E5%8A%A0%E5%89%8D%E7%BC%80%EF%BC%8C%E8%80%8C%E6%98%AF%E8%AE%A9%E6%89%80%E6%9C%89%E5%9B%A2%E9%98%9F%E6%88%90%E5%91%98%E7%90%86%E8%A7%A3%EF%BC%9A%E5%BE%AE%E5%89%8D%E7%AB%AF%E9%87%8C%E6%B2%A1%E6%9C%89%E2%80%9C%E4%B8%B4%E6%97%B6%E5%8A%A0%E4%B8%AA%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F%E2%80%9D%E7%9A%84%E5%AE%89%E5%85%A8%E5%8C%BA%E3%80%82%E4%B8%80%E6%97%A6%E6%BC%8F%E6%8E%89%E4%B8%80%E4%B8%AA%20import%E3%80%81%E4%B8%80%E4%B8%AA%E6%9C%AA%E5%A4%84%E7%90%86%E7%9A%84%20postcss%20%E9%85%8D%E7%BD%AE%E3%80%81%E4%B8%80%E4%B8%AA%E6%B2%A1%E5%90%8C%E6%AD%A5%E7%9A%84%20SCSS%20%E5%8F%98%E9%87%8F%EF%BC%8C%E6%B1%A1%E6%9F%93%E5%B0%B1%E4%BC%9A%E5%9C%A8%E6%9F%90%E4%B8%AA%E6%B7%B1%E5%A4%9C%E5%8F%91%E5%B8%83%E5%90%8E%E7%AA%81%E7%84%B6%E7%88%86%E5%8F%91%E2%80%94%E2%80%94%E8%80%8C%E4%B8%94%E5%8F%AA%E5%9C%A8%E7%89%B9%E5%AE%9A%E5%88%87%E6%8D%A2%E8%B7%AF%E5%BE%84%E4%B8%8B%E5%A4%8D%E7%8E%B0%E3%80%82
