less本身不提供运行时样式隔离，仅作为构建阶段预处理器配合css modules、命名空间约定及html容器class实现隔离；缺一不可，否则规则无效或被绕过。
Less本身不隔离样式，它只配合真正隔离机制落地
Less不是运行时沙箱，它在构建阶段就编译完了，对微前端的样式污染毫无拦截能力。你写.myapp { .button { } }，只要HTML里没class="myapp"，这条规则就等于不存在；哪怕写了，document.body.appendChild(modalEl)这种脱离容器的操作，样式照样失效。
常见错误现象：
- 主应用用了
normalize.css，子应用又带了reset.css，两个都挂进，层叠顺序不可控 - 子应用里
styled-components生成的<style></style>标签绕过qiankun劫持，直接污染全局 -
@import "antd.less"没加(reference)，导致变量和mixin被重复注入，颜色值被覆盖
Less在微前端中真正该干的事：配合构建流程做前缀注入与模块约束。关键配置点：
- 确保Less文件以
.module.less结尾，否则css-loader默认不启用modules模式 - Webpack配置中
css-loader的modules.auto必须设为true或显式匹配/\.module\.(less|css)$/ - 若需保留第三方类名（如
:global(.ant-btn)），必须出现在.module.less中，否则会被哈希化导致图标/组件样式丢失 - 所有动态拼接的
className（比如className={`btn ${type}`}）必须走styles[type]映射，否则type字符串会作为全局class注入
命名空间 + HTML容器 + 构建约束，三者缺一不可
单独写.myapp { .button { } }是纸面隔离。真正起效需要同时满足：
- HTML根节点有且仅有
class="myapp"（不能是id，不能是属性选择器） - 所有第三方组件必须挂载在这个容器内（
ReactDOM.createPortal目标节点也得是容器内部元素） - 构建时禁用
!important，统一用BEM或层级压制（如.myapp .ant-btn > .ant-btn） -
@import (reference)引入变量和mixin，避免重复输出基础样式
最容易被跳过的，就是那个看似简单的class="myapp"——它不在DOM上，Less再规范也没用。
Element Plus / Ant Design类名冲突必须从源头改类名
Vue2 + ElementUI 和 Vue3 + ElementPlus 共存时，.el-input__inner这类共享前缀类名一旦后加载，就会直接覆盖前者。这不是权重问题，是规则已写死进DOM。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
正确做法不是加容器class，而是从源头改类名：
- 在子应用
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/' : '/'
这个路径错一点，样式就全断，连隔离逻辑都跑不起来——因为根本没加载成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
