子应用CSS冲突本质是“生效了但不该生效”，因qiankun strictStyleIsolation仅劫持标准style/link插入，无法拦截innerHTML拼接、CSS-in-JS、@import嵌套、主应用预加载及类名共享等场景，须通过动态publicPath、命名空间隔离、CSS Modules全链路配置及构建产物路径校验四层对齐来系统解决。
微前端里子应用 CSS 冲突不是“样式没生效”，而是“生效了但不该生效”——它已经写进 document.head，浏览器照单全收，沙箱拦不住，!important 也压不住。
为什么 qiankun 的 strictStyleIsolation 常常失效
这个配置只劫持动态插入的 <style> 和 <link rel="stylesheet">，但对以下情况完全无感：
- 子应用在 JS 中拼字符串后直接
document.head.innerHTML += '...'（绕过劫持） - 使用
styled-components或emotion等 CSS-in-JS 库，它们生成的<style>不走标准 DOM 插入流程 - CSS 文件里写了
@import "xxx.css"，qiankun 不会递归解析并重写这些嵌套引入 - 主应用提前加载了
normalize.css或全局 reset，子应用的button { margin: 0 }会被它覆盖，而这不是子应用能控制的
Element Plus / Ant Design 类名冲突必须用命名空间重编译
Vue2 + ElementUI 和 Vue3 + ElementPlus 共存时，.el-input__inner 这类共享前缀类名一旦后加载，就会直接覆盖前者。这不是权重问题，是规则已写死进 DOM。
正确做法不是加容器 class，而是从源头改类名：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在子应用
main.ts初始化 ElementPlus 时传入{ namespace: 'ep' }，让所有组件类名变成ep-button、ep-input - 同步新建
src/styles/element/index.scss，内容为：@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'); - Vite 用户需在
css.preprocessorOptions.scss.additionalData中注入该文件；Webpack 用户配sass-loader.additionalData - 漏掉任一环，构建产物里还是
el-开头，隔离就白做了
子应用 CSS 文件 404 导致样式“完全不生效”的真实原因
子应用构建产物中若 CSS 路径是绝对路径（如 /css/app.abc123.css），嵌入主应用后会向根域请求资源，但实际部署在子应用专属路径下（如 /subapp-order/css/app.abc123.css），结果就是 404。
必须让静态资源路径与子应用注册时的 entry 一致：
- Webpack 子应用：设置
publicPath为运行时动态值，例如process.env.NODE_ENV === 'production' ? '/subapp-order/' : '/' - Vite 子应用：配置
build.base，同样区分环境，window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - 构建后务必检查产物
index.html中所有<link href>的路径是否匹配主应用注册子应用时的完整 URL
CSS Modules 不启用等于没写
很多人写了 Button.module.less，但最终生成的仍是 className="button"，根本没哈希化——因为构建配置没跟上。
两个硬性条件缺一不可：
- 文件名必须是
xxx.module.less（不是xxx.less），否则css-loader默认不启用 modules 模式 - Webpack 配置中
css-loader的modules.auto必须设为true或显式匹配/\.module\.(less|css)$/；Vite 用户需确认css.modules.generateScopedName已启用 - 漏掉任一条件，JS 里
import styles from './Button.module.less'拿到的styles.button就是字面量"button"，不是哈希后的唯一名
真正难的不是写对某一行配置，而是确保构建时路径、命名空间、模块化、运行时注入这四层全部对齐——漏掉任何一层，样式都会在某个用户、某次切换、某个浏览器里悄悄破防。
