scss 无运行时作用域隔离，需编译前缀+容器约束组合实现；第三方css、link引入、字体/动画/变量等均不被前缀处理；ui库须同步配置js命名空间与scss变量覆盖；挂载容器class必须严格匹配前缀，否则样式失效。
SCSS 本身不提供运行时作用域隔离能力，所谓“SCSS 作用域隔离”实际是编译时加前缀 + 运行时容器约束的组合策略，单独写 @use 或 @import 不会自动防止污染。
SCSS 前缀只对本地 .scss 文件生效，不处理第三方 CSS
你在子应用里写：.subapp-order { .button { color: blue; } }，编译后确实生成 .subapp-order .button。但这个规则是否起效，取决于 DOM 中是否存在 class="subapp-order" 的挂载容器。如果子应用挂载点是 <div id="subapp"></div>，那这条 CSS 完全不会匹配任何元素。
更关键的是：@import "element-plus/theme-chalk/index.scss"、import 'normalize.css' 这类全局引入，压根不经过你的 SCSS 编译流程——它们的类名（如 .el-button、button）不会被自动加前缀。
- 所有直接
import的 CSS/SCSS 文件，只要没被 PostCSS 或构建插件重写，都算“逃逸出作用域” -
link rel="stylesheet"加载的外部 CSS（如 CDN 上的 Bootstrap）完全绕过任何 SCSS 控制 - 字体定义（
@font-face）、动画（@keyframes）、CSS 变量（:root { --color: red }）也不会被前缀影响
Element Plus 必须同步改 JS 渲染和 SCSS 变量，否则前缀失效
只在 app.use(ElementPlus, { namespace: 'ep' }) 里设命名空间，JS 层能渲染出 <ep-button></ep-button>，但 SCSS 编译产物里仍是 .el-button——因为 theme-chalk 的变量文件没被覆盖。
必须新建 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 全局注入该文件，确保所有 SCSS 编译都读到这个 $namespace 值。漏掉这一步，你看到的 CSS 文件里依然满屏 .el- 开头的类名。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- Ant Design Vue、Naive UI 等同理，需查文档确认是否支持
prefixCls+ SCSS 变量双配置 - UI 库的图标字体（如
.el-icon-xxx）也得一并覆盖，否则图标样式仍泄漏 - 若子应用用了
ElMessage等挂载到document.body的组件，还需手动包裹容器或重写挂载逻辑
Vite 子应用不能依赖 experimentalStyleIsolation
这个选项对 Vite 构建的子应用基本无效。Vite 的 CSS 是通过 import 'xxx.css' 走 ES 模块加载链，最终由 <style></style> 标签注入 ，qiankun 劫持不到该过程。
正确做法是：
- 在
postcss.config.js中配置postcss-prefix-selector，指定唯一前缀如.subapp-order - 移除所有
<link rel="stylesheet">，改用 JS 动态加载并注入到子应用容器内：container.appendChild(styleEl) - 设置
build.base = window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/'，确保产物中所有资源路径与主应用注册的entry一致
注意：postcss-prefix-selector 默认不处理 :global 块、伪类（:hover）、属性选择器（[type="text"]），需手动检查输出结果。
真正起效的前提：挂载容器必须存在且 class 名严格匹配
哪怕 SCSS 编译、PostCSS、UI 库配置全对了，如果子应用挂载点是 <div id="app"></div>，而你所有 CSS 规则都基于 .subapp-order，那整套前缀就形同虚设。
必须确保：
- 主应用注册子应用时，明确指定容器
container: '#subapp-order' - 子应用根组件挂载目标是
document.querySelector('#subapp-order')，且该节点有class="subapp-order" - 动态插入的 DOM（如弹窗、Tooltip）也需手动添加该 class，否则样式不命中
最常被忽略的一点：子应用里用 document.createElement('div') 创建的节点，如果不显式设置 className，就不会继承容器前缀语义——这类节点的样式兜底只能靠 all: initial 或主应用统一重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
