Less命名空间无法真正隔离第三方CSS，因其仅编译选择器结构而不修改类名或生成scoped行为；必须通过HTML容器约束与高优先级选择器手动控制作用域。
Less 命名空间不能真正隔离第三方 CSS
直接套用 .third-party {} 包裹第三方样式不会生效——Less 编译时只处理选择器结构，不修改第三方原始类名或生成 scoped 行为。比如你写：
.my-namespace {
@import 'third-party.css';
}
这根本不会编译成功，因为 @import 在 Less 中不支持直接导入纯 CSS 文件（除非加 (less) 标志），更不会把 .btn 变成 .my-namespace .btn。
必须用 :global + 手动包裹才能控制作用域
Less 本身没有类似 Vue 的 <style scoped> 或 CSS-in-JS 的自动哈希机制。要“隔离”，实际是靠人为限制选择器层级和避免全局污染：
- 第三方样式必须以
:global()显式声明，否则 Less 会尝试给所有选择器加前缀 - 自己写的组件样式应放在命名空间内，且避免使用
:global意外泄露 - 导入顺序很重要：先
:global引入第三方，再定义自己的命名空间，防止覆盖或冲突
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
// 先全局引入第三方（不加前缀）
:global {
@import (less) 'normalize.less';
@import (less) 'bootstrap.less';
}
// 再定义你的命名空间，确保内部所有类都带前缀
.my-app {
// 这里的 .button 会被编译为 .my-app .button
.button {
color: blue;
}
// 如需局部覆盖第三方类，必须显式重写并加前缀
:global(.btn-primary) {
background: #007bff;
}
}
第三方 CSS 类名冲突时，:global 是双刃剑
当你在 .my-app 里写 :global(.btn)，它会透出到全局，等于主动放弃隔离——这常被误当作“隔离手段”，其实是反效果。
- 想真正避免影响其他模块？别用
:global(.xxx)覆盖，改用更具体的选择器，例如.my-app .btn（前提是第三方类名可预测且稳定） - Bootstrap 等框架大量使用
!important，直接覆盖容易失效；建议用更高优先级选择器，如.my-app .btn.btn-primary - 如果第三方是纯 CSS（非 Less），只能通过
@import (css)引入，此时它完全脱离 Less 作用域控制，必须靠 HTML 结构约束（如只在<div class="my-app">内使用）
真正可靠的隔离方式只有 HTML 容器 + CSS 优先级控制
Less 命名空间不是沙箱，它不改变浏览器渲染规则。所谓“隔离”，最终落地就两条：
- HTML 层级隔离：
<div class="my-app">...</div>，所有第三方组件嵌套其中 - CSS 优先级压制：用更长、更具体的选择器覆盖第三方默认样式，例如
.my-app .third-party-widget .btn-default - 避免
@import (css)直接塞全局样式表；如有必要，用构建工具（如 PostCSS）做 post-process 隔离（如 css-modules 或 prefixer）
Less 本身不做运行时作用域管理，所有“隔离”都是开发者用结构和规则硬控出来的——这点很容易被文档误导。
