qiankun 的 strictstyleisolation 和 styledisolation 无法自动解决 scss/css 隔离，因其仅控制样式挂载位置，不改写选择器、不加前缀、不处理 @import 和 css-in-js；scss 编译后输出标准 css，类名如 .el-input__inner 仍全局冲突，必须全链路注入命名空间变量、校验构建产物、对齐静态资源路径并重编译第三方 css。
不能靠 qiankun 的 strictStyleIsolation 或 styledIsolation 自动解决 SCSS/CSS 隔离——它不改写选择器、不加前缀、不处理 @import 和 CSS-in-JS，只管挂载位置。
为什么 SCSS 编译后的 CSS 在微前端里必然冲突
SCSS 本身只是预处理器，最终输出仍是标准 CSS。一旦编译成 .el-input__inner 或 .btn 这类通用类名，就和所有其他应用共享全局命名空间。浏览器不认“这是哪个子应用的 SCSS”，只认“这个 class 是否匹配当前 DOM”。后加载的样式直接覆盖先加载的，!important 都压不住。
常见失效现象：
- 主应用用 ElementUI（
.el-button），子应用用 ElementPlus（同样.el-button），切换页面后按钮样式错乱 - 子应用
@import "common/_reset.scss"，结果主应用的bodymargin 被重置 - Vue SFC 中
<style lang="scss"></style>写了.card { @include flex-center; }，但.card在主应用里已定义，样式被覆盖
SCSS 层必须全链路注入命名空间变量
以 ElementPlus 为例，仅在 app.use(ElementPlus, { namespace: 'ep' }) 不够——SCSS 源码里仍硬编码 $namespace: 'el'，构建时不会自动替换。必须让变量在编译期就生效。
实操要点：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 新建
src/styles/element_plus_namespace.scss，内容为：@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep');
- Vite 项目：在
vite.config.js的css.preprocessorOptions.scss.additionalData中注入该文件路径 - Webpack 项目：配置
sass-loader的additionalData，确保所有.scss文件都能访问到重写的$namespace - 检查构建产物：打开
dist/css/*.css，搜索ep-button，确认没有残留el-button
CSS 文件路径错位导致 404，样式根本没加载
子应用构建产物中若 CSS 路径是绝对路径（如 /css/app.abc123.css），嵌入主应用后浏览器会向根域请求，但实际资源部署在子应用专属路径下（如 /subapp-order/css/app.abc123.css），结果就是 404 —— 样式隔离再完美也白搭。
必须让静态资源路径与 registerMicroApps 中注册的 entry 一致：
- Webpack 子应用：设置
publicPath为运行时动态值，例如process.env.NODE_ENV === 'production' ? '/subapp-order/' : '/' - Vite 子应用：配置
build.base，例如window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - 构建后检查
index.html中所有<link href="...">，路径必须能被主应用正确解析
第三方 CSS（如 Bootstrap）不能直接 import
直接在子应用中 import 'bootstrap/dist/css/bootstrap.min.css' 或写 <link rel="stylesheet">，等于把全局规则扔进 document.head，qiankun 拦不住，污染立现。
正确做法是重编译源码，强制嵌套命名空间：
- 新建
bootstrap-iso.scss：.bootstrap-iso { @import 'bootstrap/scss/bootstrap'; } - 确保该文件被作为入口参与构建（如在
main.ts中 import 它） - Bootstrap 的 JS 组件（如
Modal）默认只认.modal，需显式传入带前缀的选择器：new Modal(document.querySelector('.bootstrap-iso .modal')) - 避免用
:global()或内联style=""，它们完全绕过任何构建期前缀逻辑
真正卡住人的点往往不在“怎么配”，而在“配了但没生效”——比如漏掉 SCSS additionalData 注入、CSS 路径没对齐、或第三方库 JS 初始化时没传前缀选择器。这些地方一漏，整个隔离链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
