子应用CSS必须动态注入而非静态加载，构建时需重写选择器加前缀、运行时注入到容器、UI框架样式加命名空间，三者缺一不可。
不能直接 import 或用 <link rel="stylesheet"> 引入子应用 CSS——这是污染的起点，不是配置没开对的问题。
子应用 CSS 必须走 JS 动态注入，而非静态加载
qiankun 的 sandbox.styleIsolation 不劫持 <link> 标签或 @import，也不改写外部 CSS 文件里的选择器。一旦子应用构建产物里存在 <link href="/css/app.css">，它就会直接插入主文档 <head>，全局生效。
- Webpack 子应用：确保
publicPath是运行时动态值（如window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/'），并移除所有html-webpack-plugin自动生成的<link> - Vite 子应用：设置
build.base同样动态，并在index.html中删掉所有<link rel="stylesheet">；改用import('./styles/index.css')+ 自定义loadMicroApp钩子注入到容器内 - 验证方式：打开 DevTools → Elements → 搜索
<link，确认子应用 DOM 容器内无该标签；再搜索<style，确认其父节点是子应用容器而非<head>
UI 框架样式必须加命名空间，不能靠沙箱兜底
ElementPlus 的 .el-input__inner 和 ElementUI 的同名类会互相覆盖，sandbox.styleIsolation 完全不拦截这类已写死的类名规则——它只管“怎么挂载”，不管“挂什么内容”。
- Vue3 + ElementPlus 子应用：初始化时传
{ namespace: 'ep' }，让所有类名变成.ep-input、.ep-button - 同步覆盖 SCSS 变量：新建
src/styles/element-plus-ns.scss，内容为@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'); - Vite 项目需在
vite.config.ts的css.preprocessorOptions.scss.additionalData中注入该文件；Webpack 项目则配sass-loader.additionalData - 禁用
import 'element-plus/dist/index.css'—— 这行代码必须从入口文件中彻底删除
Vite 子应用不能依赖 experimentalStyleIsolation
这个配置对 Vite 构建的子应用基本无效。Vite 的 CSS 处理链（import 'xxx.css' → 插入 <style> 到 <head>）发生在 qiankun 沙箱接管之前，劫持不到。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 必须用
postcss-prefix-selector插件，在构建时重写所有选择器，例如把.btn改成.subapp-order .btn - 配置
postcss.config.js，指定前缀为子应用唯一 ID（如subapp-order），且作用域设为include: ['src']，避免误改 node_modules - 构建后检查产物 CSS 文件：全文搜索
.btn，确认不存在裸露未加前缀的规则；再搜索.subapp-order，确认覆盖率 100% - 如果用了 CSS-in-JS（如 styled-components），需配合
StyleSheetManager将样式注入到容器元素，而非默认document.head
CSS 变量和字体图标仍需手动隔离
--primary-color 这类自定义属性是全局继承的，加前缀或 Shadow DOM 都拦不住它从子应用透传到主应用。字体图标（@font-face）、动画（@keyframes）也一样——它们注册即生效，不参与选择器匹配。
- CSS 变量必须强制带 app-id 前缀，格式为
--mf-{app-name}-{name}，例如--mf-order-header-bg - 禁止在 JS 中写
el.style.setProperty('--color', 'red')；统一用document.documentElement.style.setProperty('--mf-order-color', 'red') - 字体图标需重命名
@font-face的font-family，例如从iconfont改为mf-order-iconfont，并在子应用所有使用处同步更新 - 构建时建议加 ESLint 插件校验：拦截漏加前缀的
--*使用，以及未声明font-family前缀的 CSS 文件
真正安全的 CSS 引入，从来不是靠一个配置开关，而是构建时重写 + 运行时注入 + 命名空间契约三者缺一不可。最容易被忽略的是：第三方 CSS 文件（如 normalize.css）若被多个子应用重复 import，qiankun 不会去重，最终 DOM 中出现多份 identical 的 <style> 标签——加载顺序决定谁赢，结果不可控。
