Single-SPA本身不处理CSS加载/卸载，子应用CSS残留源于样式标签注入后不随unmount自动清除；Vue/React打包后CSS通过style-loader或mini-css-extract-plugin插入<head>，即使使用CSS Modules或scoped也仅解决类名冲突，不解决标签级残留。
Single-SPA 本身不处理 CSS 加载/卸载，子应用的样式默认会全局污染，必须手动控制 CSS 的注入与移除。
为什么子应用的 CSS 会残留？
Vue/React 子应用打包后，CSS 通常通过 style-loader 或 mini-css-extract-plugin 注入到 <head> 中 —— 这些样式标签一旦插入，不会随 unmount 自动清除。用户切走再切回，mount 可能重复插入同一份 CSS，导致样式叠加、权重冲突或 FOUC。
- 开发时用
style-loader：每次mount都新建<style>标签，无去重逻辑 - 生产用
mini-css-extract-plugin：CSS 提取为独立.css文件，但加载后仍常驻<head> - 即使子应用用了 CSS Modules 或 scoped，也只解决类名冲突，不解决标签级残留
如何在 mount/unmount 中动态管理 CSS？
核心思路：把 CSS 文件路径作为资源标识，在 mount 时插入 <link rel="stylesheet">，在 unmount 时按路径精准移除对应标签。
- 子应用需暴露一个稳定的 CSS 入口路径（如
publicPath + 'css/app.css'），不能是哈希随机名（否则无法匹配） - 在
mount前检查该<link>是否已存在，避免重复插入 - 在
unmount中通过document.querySelector('link[href="..."]')定位并remove()，不是清空所有link - 若使用 CSS-in-JS（如 Emotion），需调用其
cache.reset()或卸载 renderer，而非仅删 DOM 标签
示例（Vue 子应用 main.js 片段）：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
const CSS_URL = '//localhost:8082/css/app.css'
function insertCSS() {
if (document.querySelector(`link[href="${CSS_URL}"]`)) return
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = CSS_URL
document.head.appendChild(link)
}
function removeCSS() {
const link = document.querySelector(`link[href="${CSS_URL}"]`)
if (link) link.remove()
}
export function mount(props) {
insertCSS()
return vueLifecycle.mount(props)
}
export function unmount(props) {
removeCSS()
return vueLifecycle.unmount(props)
}
Webpack 配置要配合做哪些事？
关键不是“能不能打出来 CSS”，而是“能不能让 CSS 路径可控、可预测”。否则 CSS_URL 无法硬编码或稳定推导。
- 禁用 CSS 文件名哈希：
filename: 'css/app.css'（开发/测试环境可行） - 生产环境若必须哈希，需将真实文件名写入子应用的
manifest.json或通过window.__CSS_ENTRY__暴露给基座 -
publicPath必须设为完整 URL（如'//localhost:8082/'），否则相对路径在基座域下 404 - 避免用
style-loader在生产环境 —— 它把 CSS 内联进 JS，无法外部控制生命周期
容易被忽略的边界情况
多个子应用共用同一份基础 UI 库（如 antd、element-ui）时，它们各自的 CSS 可能都引入了 reset.css 或 common.css，手动管理易漏删或误删。
- 不要用
document.querySelectorAll('link').forEach(...)清空所有样式表 - 基座应用应维护一份「共享 CSS 白名单」，对这类公共资源跳过自动卸载
- 若子应用用了
@import或字体@font-face，它们依赖的<link>也要一并管理，否则卸载后字体失效 - IE11 下
link.remove()不可用，需回退到link.parentNode.removeChild(link)
