SCSS生成的<style>标签未随子应用卸载而移除，因其由构建工具独立注入document.head，与容器DOM解耦；需通过data-app-id标记并在unmount钩子中手动remove()，同时对Element Plus等UI库启用命名空间并确保SCSS变量全局注入。
子应用卸载后样式还在？不是沙箱没生效，而是 SCSS 编译出的 <style> 标签根本没被移除。
SCSS 生成的 <style> 不随子应用 DOM 一起卸载
SCSS 文件最终编译为 CSS 并由构建工具（如 Vite 或 Webpack）注入到 document.head，这个过程与子应用容器 DOM 完全解耦。qiankun 的 unmount 钩子只清理容器节点，对这些独立插入的 <style> 标签视而不见——哪怕你用了 scoped 或 modules，只要没手动管理生命周期，它们就永远留在 DOM 里。
- 现象：切换子应用后，按钮颜色、间距、z-index 突然错乱，DevTools 中仍能搜到旧子应用的类名规则
- 原因：Vite 默认用
import './index.scss'→ 插入全局<style data-v-xxx>；Webpack + style-loader 同理 - 关键点：这类标签没有绑定到任何 DOM 节点，浏览器不会自动回收，必须显式
remove()
给 SCSS 样式打上可识别标记并手动清理
核心思路是让每条由子应用注入的 <style> 都带唯一标识，卸载时靠它精准定位、批量删除。
- Webpack 用户：在
style-loader配置中加attributes: { 'data-app-id': 'sub-app-a' } - Vite 用户：改用
css.postcssOptions或自定义插件，在注入前手动创建<style>并设置data-app-id - 卸载钩子中执行：
document.querySelectorAll('style[data-app-id="sub-app-a"]').forEach(el => el.remove()) - 注意：若子应用用了
@import或第三方 UI 库的全局 SCSS（如 Element Plus 的theme-chalk），这些样式不会带标记，需额外处理
第三方 UI 框架的 SCSS 必须同步隔离
Element Plus、Ant Design Vue 这类库的 SCSS 是构建时一次性编译进 CSS 文件的，不走运行时注入流程，data-app-id 对它们完全无效。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 必须启用命名空间：初始化时传
{ namespace: 'ep' }，并确保 SCSS 变量文件（如element-namespace.scss）被全局注入 - 构建后检查产物 CSS 文件，确认所有类名已变成
.ep-button、.ep-input__inner，而非原始.el-前缀 - 若仍存在裸露的
.el-规则，说明 SCSS 编译未读取 namespace 变量，常见于 Vite 中漏配css.preprocessorOptions.scss.additionalData
动态注入的 @import 和字体/动画规则最难清
SCSS 里的 @import "reset.css" 或 @font-face、@keyframes 会被打包工具提取为独立 <style> 标签，且不带任何业务标识——它们既不挂容器，也不走 JS 注入路径，沙箱和手动清理都难覆盖。
- 最佳实践：子应用禁用所有
@import全局文件，把 reset、fonts、animations 收归主应用统一提供 - 若必须由子应用控制，改用 JS 动态加载：fetch CSS 文本 → 创建
<style>→ 设置data-app-id→ 插入容器内（非head） - 验证方式：卸载后打开 DevTools → Elements → 搜索
data-app-id="sub-app-a"，应无任何<style>或<link>匹配
真正麻烦的从来不是“怎么加样式”，而是“怎么确定它彻底没了”——尤其当多个子应用共用同一套 SCSS 变量或 UI 库时，残留往往藏在你没检查到的 @import 层、字体声明里，或者被构建工具悄悄合并进了主应用的 CSS chunk 中。
