qiankun 不拦截重复 css 是因样式劫持仅作用于子应用动态插入的 ，对 、@import 和打包时解析的 import 'xxx.css' 无感知；主应用统一提供基础 css 并构建拦截是落地底线。
子应用 CSS 重复引入不是“多加载一次”的小问题，而是直接导致样式覆盖、渲染错乱、带宽浪费的确定性风险。qiankun 不做去重，import 'normalize.css' 在两个子应用里各写一次，DOM 中就出现两份 identical 的 <style></style> 标签——谁后加载谁生效，结果不可控。
为什么 qiankun 不拦截重复 CSS
qiankun 的样式劫持只作用于子应用自身动态插入的 <style></style>（比如 CSS-in-JS 或 JS 动态创建），对以下三类完全无感：
-
<link rel="stylesheet">标签（构建时生成的 HTML） -
@import规则（SCSS/CSS 中嵌套引入） -
import 'xxx.css'这类打包时已解析为独立 chunk 的静态资源
这些路径最终由浏览器原生 fetch 加载，qiankun 没有 hook 点，更不会比对内容哈希去重。
主应用统一提供基础 CSS 是最稳方案
把所有非业务专属的全局样式收归主应用，子应用彻底移除对应 import，从源头杜绝重复。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 主应用打包时显式引入：
import 'normalize.css'、import './fonts.css'、import 'element-plus/theme-chalk/index.css'（已配 namespace） - 子应用代码中删除所有类似
import 'ant-design-vue/dist/reset.css'或import 'bootstrap/dist/css/bootstrap.min.css' - 构建后检查子应用产物
index.html，确认没有<link href="/css/...>%20%E6%8C%87%E5%90%91%E5%85%AC%E5%85%B1%E5%BA%93%E6%A0%B7%E5%BC%8F %0A
%E5%AD%90%E5%BA%94%E7%94%A8%E8%8B%A5%E5%BF%85%E9%A1%BB%E5%B1%80%E9%83%A8%E7%94%A8%E7%AC%AC%E4%B8%89%E6%96%B9%20CSS%EF%BC%8C%E5%8F%AA%E8%83%BD%E8%B5%B0%E6%A8%A1%E5%9D%97%E5%8C%96%E8%B7%AF%E5%BE%84
%0A%E7%BB%9D%E5%AF%B9%E7%A6%81%E6%AD%A2%E5%9C%A8%E5%AD%90%E5%BA%94%E7%94%A8%E5%85%A5%E5%8F%A3%E6%88%96%20layout%20%E5%B1%82%20import%20%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F%EF%BC%9B%E8%8B%A5%E6%9F%90%E7%BB%84%E4%BB%B6%E5%BC%BA%E4%BE%9D%E8%B5%96%EF%BC%88%E5%A6%82%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E9%85%8D%E5%A5%97%E6%A0%B7%E5%BC%8F%EF%BC%89%EF%BC%8C%E5%BF%85%E9%A1%BB%E6%94%B6%E6%95%9B%E5%88%B0%E7%BB%84%E4%BB%B6%E7%BA%A7%E9%9A%94%E7%A6%BB%E8%8C%83%E5%9B%B4%E3%80%82
%0A- %0A
- Vue%20SFC%EF%BC%9A%E7%94%A8%20
<style%20scoped>%20+%20:deep(.ql-editor)%20%E6%8E%A7%E5%88%B6%E7%A9%BF%E9%80%8F%E8%8C%83%E5%9B%B4 %0A - React%EF%BC%9A%E6%94%B9%E7%94%A8%20
Button.module.css%EF%BC%8CCSS%20Modules%20%E8%87%AA%E5%8A%A8%E5%8A%A0%E5%93%88%E5%B8%8C%E5%89%8D%E7%BC%80 %0A - %E7%BA%AF%20JS%20%E5%AD%90%E5%BA%94%E7%94%A8%EF%BC%88jQuery%EF%BC%89%EF%BC%9A%E6%89%8B%E5%8A%A8%E5%8C%85%E8%A3%85%E6%A0%B7%E5%BC%8F%E5%9D%97%EF%BC%8C%E6%B3%A8%E5%85%A5%E5%89%8D%E5%8A%A0%E5%AE%B9%E5%99%A8%20ID%20%E5%89%8D%E7%BC%80%EF%BC%8C%E4%BE%8B%E5%A6%82%20
const%20style%20=%20document.createElement('style');%20style.textContent%20=%20%60.subapp-user%20#editor%20%7B%20...%20%7D%60;%0A
%E6%9E%84%E5%BB%BA%E6%97%B6%E6%A0%A1%E9%AA%8C%E8%83%BD%E6%8B%A6%E4%BD%8F%2090%%20%E7%9A%84%E6%BC%8F%E7%BD%91%E4%B9%8B%E9%B1%BC
%0A%E9%9D%A0%E4%BA%BA%E5%B7%A5%20review%20%E4%BB%A3%E7%A0%81%E5%A4%AA%E5%AE%B9%E6%98%93%E6%BC%8F%EF%BC%8C%E5%BB%BA%E8%AE%AE%E5%9C%A8%20CI%20%E9%98%B6%E6%AE%B5%E5%8A%A0%E4%B8%80%E9%81%93%E7%A1%AC%E7%BA%A6%E6%9D%9F%EF%BC%9A
%0A- %0A
- Webpack%20%E5%AD%90%E5%BA%94%E7%94%A8%EF%BC%9A%E7%94%A8%20
eslint-plugin-import%20%E9%85%8D%E7%BD%AE%20no-restricted-imports%EF%BC%8C%E7%A6%81%E7%94%A8%20normalize.css%E3%80%81bootstrap/dist/css%20%E7%AD%89%E8%B7%AF%E5%BE%84 %0A - Vite%20%E5%AD%90%E5%BA%94%E7%94%A8%EF%BC%9A%E5%9C%A8%20
build.rollupOptions.onwarn%20%E4%B8%AD%E6%8B%A6%E6%88%AA%E5%90%AB%20.css%20%E7%9A%84%20import%20%E8%AF%AD%E5%8F%A5%E5%B9%B6%E6%8A%A5%E9%94%99 %0A - %E4%B8%BB%E5%BA%94%E7%94%A8%E9%83%A8%E7%BD%B2%E5%89%8D%E6%89%AB%E6%8F%8F%20DOM%EF%BC%9A
document.querySelectorAll('link[href*=" normalize> 数量必须为 1
真正难处理的从来不是“怎么加隔离”，而是“怎么让所有人不绕过它”——命名空间、strictStyleIsolation、CSS Modules 这些都可能被一个 import 打穿。强制收敛 + 构建拦截，才是落地底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
