Less中组件样式隔离需用唯一根类名嵌套书写，禁用全局选择器；变量通过@import(reference)和参数化mixin注入；避免extend，改用mixin调用；构建时用正则检查CSS输出确保无未包裹选择器。
Less里怎么让组件样式不污染全局
用 less 写组件，最常踩的坑是样式“漏出去”——改了一个按钮的 color，结果整个页面的 h2 都变色了。根本原因是没隔离作用域，less 默认编译后全是全局选择器。
解决办法不是靠命名约定（比如加 my-btn- 前缀），而是用嵌套 + 唯一根类名主动收束范围：
- 每个组件顶层必须有一个唯一、稳定、带业务语义的类名，比如
.article-card或.search-input-v2 - 所有内部样式都以这个根类为父选择器嵌套书写，避免出现孤立的
button {}或.icon {} - 慎用
&拼接时脱离根上下文，例如& + .sibling仍属于根作用域，但body &就破坏了隔离
示例：
.search-input-v2 {
position: relative;
width: 100%;
input {
padding: 8px 12px;
border: 1px solid #ccc;
}
.clear-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
}
如何复用变量又不让组件间互相干扰
全局变量（如 @primary-color）在跨组件时容易被覆盖或误读。直接在组件 .less 文件里 @import 公共变量文件没问题，但一旦某个组件想“局部覆盖”，就容易引发连锁反应。
立即学习“前端免费学习笔记（深入）”；
更可控的做法是：把变量注入到组件作用域内，而非依赖外部定义：
- 组件
.less文件顶部用@import (reference)引入基础变量，它不会输出 CSS，只供计算使用 - 关键尺寸、颜色等通过参数化 mixin 定义，比如
.btn-style(@bg: @primary-color, @radius: 4px)，调用时显式传参 - 避免在组件中重新赋值全局变量（如
@primary-color: red;），这会影响后续所有导入它的文件
这样改一个组件的配色，不会导致导航栏按钮也跟着变。
为什么用 extend 在组件里反而更容易出错
:extend() 看似能复用样式，但在组件场景下极易越界。Less 的 extend 是静态查找并合并选择器，不关心作用域层级。
常见翻车点：
-
.base-icon:extend(.icon all)—— 如果.icon在其他组件里定义过，且没加根类包裹，就会把那个.icon的所有规则拖进当前组件 -
extend后生成的选择器可能脱离组件根类，变成全局.icon，破坏隔离 - 和
!important、伪类组合时行为难预测，调试时看不出样式从哪来
替代方案：用 .mixin() + 显式调用，确保所有样式都落在组件根类之下。哪怕多写一行 .btn-style();，也比 extend 更可追溯。
构建时怎样确认组件样式真的没溢出
光靠肉眼检查 HTML 结构不够，得靠工具链卡住出口。关键不是“写了没写错”，而是“编译后有没有漏”。
- 用
less-plugin-autoprefix或 PostCSS 插件后置处理时，确保它运行在作用域已确定之后（即 Less 编译完成、CSS 输出阶段），否则前缀加错位置 - CI 中加一条检查：用正则扫描产出 CSS，禁止出现未包裹的标签选择器（如
button {）、ID 选择器（#header {）、或孤立的类名（如.modal {但无父级上下文） - 本地开发时打开浏览器开发者工具，选中组件 DOM，看 computed styles 的来源文件是否精准指向该组件的
.less，而不是某个公共common.less
真正难的不是写隔离，是让整个团队在 import、命名、构建环节都守住那条边界线——少一次 @import "variables" 的随意，就少一处潜在冲突。
