Less不提供运行时样式隔离，需配合.container类、.module.less命名、css-loader modules配置、:global声明及@import(reference)等措施实现隔离。
Less本身不提供运行时样式隔离，别指望它自动生效
很多人写 .micro-app { .button { } } 就以为样式被“包住”了，结果上线后按钮颜色还是被主应用的 button { color: red; } 覆盖。原因很简单：Less 只是编译时工具，它生成的 CSS 还是普通 CSS——没加前缀、没改选择器、没劫持 DOM 插入行为。真正起效的前提是：.micro-app 这个 class 必须真实存在于子应用挂载容器的 HTML 元素上，且所有动态插入的 DOM（比如 Modal、Tooltip）都得在这个容器内部。
必须配合构建配置启用 CSS Modules 模式
仅靠文件名或嵌套结构无法触发类名哈希化或命名空间注入。关键配置点如下：
-
Less文件必须以.module.less结尾，否则css-loader默认不启用 modules 模式 - Webpack 中
css-loader的modules.auto必须设为true或显式匹配/\.module\.(less|css)$/ - 若需保留第三方类名（如
.ant-btn），必须在.module.less中用:global(.ant-btn)显式声明，否则会被哈希化导致图标/样式丢失 - 所有动态拼接的
className（例如className={`btn ${type}`}）必须走styles[type]映射，否则type字符串会作为全局 class 注入
@import (reference) 是避免变量和 mixin 重复注入的关键
子应用如果直接 @import "antd.less"，会导致颜色变量、border-radius mixin 等被多次输出，最终以最后加载的为准，极易覆盖主应用主题。正确做法是：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 用
@import (reference) "antd.less";引入基础样式，它只提供变量和 mixin，不输出任何 CSS - 所有实际样式规则必须写在自己的
.module.less文件中，并通过.myapp-button { .ant-btn { ... } }方式嵌套约束作用域 - 主应用统一提供基础重置（如
html, body { margin: 0; }），子应用禁用自身reset.css或normalize.css
HTML 容器 class 是整个 Less 隔离链里最容易被跳过的环节
再规范的 .myapp { .button { } } 也救不了没挂载 class="myapp" 的容器。这个 class 必须：
立即学习“前端免费学习笔记（深入）”；
- 出现在子应用根节点上（不能是
id，不能是属性选择器，不能靠 JS 动态加） - 与 Less 中顶层选择器完全一致（大小写、连字符、空格都不能错）
- 覆盖所有 Portal 挂载目标（如
ReactDOM.createPortal的容器也得是该元素的子节点） - 禁止使用
!important，统一靠层级压制，例如.myapp .ant-btn > .ant-btn-inner
漏掉这一环，前面所有 Less 嵌套、@import (reference)、.module.less 配置，全归零。
