Less本身不提供运行时样式隔离，需配合.module.less命名、css-loader模块化配置、HTML容器class、UI库命名空间及动态DOM约束共同实现；缺一不可。
Less 本身不提供运行时样式隔离，只在编译阶段起作用；想靠写个 .app { .btn { } } 就自动防污染，结果上线后子应用的 .el-input__inner 还是盖掉了主应用的输入框边框——这不是 Less 没用，而是你没把它嵌进隔离链里。
Less 文件必须以 .module.less 结尾才能启用模块化
Webpack 的 css-loader 默认不会对普通 .less 文件启用 modules 模式，哪怕你写了嵌套也白搭。它只会原样输出 CSS，类名不哈希、不加前缀、不约束作用域。
-
css-loader配置中必须设modules.auto: true或显式匹配/\.module\.(less|css)$/ - 所有需要隔离的样式文件，命名必须是
index.module.less，不能是index.less - 若用了
:global(.ant-btn)保留第三方类名，它只能出现在.module.less中，否则会被哈希化，图标或组件样式直接丢失 - 动态拼接的 className（比如
className={`btn ${type}`}）必须走styles[type]映射，否则type字符串会作为全局 class 注入
嵌套顶层容器 class 必须真实存在于 DOM 上
写 .myapp { .button { } } 是纸面隔离。编译后生成的是 .myapp .button，但浏览器只会在 DOM 中有 class="myapp" 的元素下才匹配这个规则。如果 HTML 根节点没加这个 class，或者加的是 id="myapp"、data-app="myapp"，那整套样式就完全不生效。
- 子应用挂载容器（如
div#subapp-order）必须手动加class="myapp"，不能依赖 JS 动态插入后再加 - 所有 Portal 渲染的目标节点（比如 Modal、Tooltip）也得在该容器内部，否则脱离作用域，样式瞬间失效
- 避免用泛型标签做顶层选择器，比如
div { .button { } }—— 编译后是div .button，极易被其他 div 下的同名类覆盖 - 顶层类名建议带业务语义，如
.order-management，而非纯技术前缀.app-a，方便调试和协作
UI 库样式必须配合 SCSS/Less 变量重定义，不能只靠嵌套
Element Plus、Ant Design 等库的类名（如 .el-button、.ant-btn）根本不在你的 Less 嵌套范围内，它们是独立构建、直接注入 <head> 的全局样式。你写 .myapp { .el-button { } } 完全无效，因为 .el-button 规则压根没进你的模块文件。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- ElementPlus：初始化时传入
{ namespace: 'ep' }，让类名变成ep-button；同步在main.ts或 SCSS 入口里@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep') - Ant Design：用
ConfigProvider的prefixCls属性，或通过modifyVars重写 less 变量（如@btn-prefix-cls: 'ant-myapp-btn'） - Bootstrap：必须用 Sass 重编译源码，包裹在命名空间块内：
.bootstrap-iso { @import "bootstrap/scss/bootstrap"; }，否则.bootstrap-iso .btn这类规则根本不存在 - CSS Custom Properties（如
--bs-primary）不会被命名空间影响，需主应用统一管理并限制作用域
变量和 Mixin 必须严格控制作用域，否则越改越乱
Less 变量不是局部的，@primary-color 在 A 文件里定义为 #007bff，B 文件里又定义成 #2563eb，最终只留下最后一个值。Mixins 如果裸名暴露（如 .button()），被其他模块误调用就会把样式漏到不该出现的地方。
- 公共变量必须带
!default，且只在项目级入口文件（如overrides.less）中赋值，不加!default - Mixin 名称加 private 前缀，如
.__button-base()，再用外壳封装：.button() { .__button-base(); } - 禁止在组件文件中定义新变量，如
.card { @padding: 12px; }—— Less 不支持块级变量，它仍是全局的 - 跨文件复用 Mixin，必须确保
@import (reference)引入，否则可能重复输出或变量冲突
最容易被跳过的，就是那个看似简单的 class="myapp" ——它不在 DOM 上，Less 再规范也没用。而最常被忽略的，是第三方库的 JS 组件（Modal、Dropdown）默认只认原始类名，必须显式传入带前缀的选择器，否则样式和行为都断开。
