结论：组件库less变量不应进入全局作用域，因其无作用域仅按导入顺序覆盖；应通过@import (reference)隔离自定义变量、严格遵循官方导入顺序、直接覆盖css规则而非修改变量，并配置less-loader paths或~别名确保路径解析正确。
直接结论：别让组件库的Less变量进你的全局作用域——它不是“可用资源”，而是潜在污染源。
为什么组件库的@import会悄悄改掉你的按钮颜色
你@import "node_modules/antd/lib/style/index.less"，结果自己定义的@primary-color被覆盖了，不是因为Ant Design“霸道”，而是Less编译器把所有@import线性展开后，它的@primary-color: #1890ff;出现在你声明之后，就赢了。变量没有作用域，只有顺序。
- 组件库的
variables.less文件通常自带完整主题变量，且默认导出（非@import (reference)），一引入就注入全局 - 如果你在入口
index.less里先@import "my-variables.less"，再@import "antd/..."，那你的变量就被覆盖了 - 更隐蔽的是：某些UI库内部
index.less又嵌套@import "variables.less"，相当于把它的变量“插”进你当前文件中间
用@import (reference)隔离变量，但只对“你写的”有效
对组件库原生文件直接加(reference)往往无效——它可能依赖自身变量链，强行引用会导致Cannot resolve variable。真正该用(reference)的是你自己写的variables.less和mixins.less。
- 把自己的基础变量全收进
src/styles/variables.less，并确保它只含@brand-blue: #007bff;这类带前缀的、无歧义的定义 - 在所有业务组件less中，用
@import (reference) "../styles/variables.less";——它不输出CSS，也不参与变量覆盖，只提供引用上下文 - 组件库的导入必须按官方文档顺序来，比如Ant Design要求先
@import "~antd/lib/style/themes/default.less"（它定义变量），再@import "~antd/lib/button/style/index.less"（它消费变量）
覆盖组件库样式，别动它的@variables，改CSS规则本身
想把Ant Design按钮圆角从6px改成4px？别去modifyVars或试图重定义@border-radius-base——这需要构建工具支持，且容易引发连锁覆盖。
- 直接写
.ant-btn { border-radius: 4px !important; }最简单，也最可控 - 如果要批量控制，用命名空间包裹：
.my-app .ant-btn { border-radius: 4px; }，然后确保HTML根节点有class="my-app" - 避免在组件less里写
@primary-color: #ff6b6b;再去@import "antd/..."——这不是定制，是埋雷
构建配置里漏掉paths，@import就静默失败
Webpack下@import "node_modules/xxx/xxx.less"报错“file not found”，不是路径写错，而是Less编译器根本没被告诉去node_modules里找。
- Webpack用户必须在
less-loader配置中加paths: [path.resolve(__dirname, 'node_modules')] - Vite用户需在
vite.config.ts的css.preprocessorOptions.less.additionalData里补路径，或改用@import "~xxx/..."（前提是已配好alias） - 用
~前缀时，确认resolve.alias指向正确，否则~antd可能指向node_modules/antd/lib而非node_modules/antd
最容易被忽略的点：组件库的Less文件不是“即插即用”的模块，它是一段编译期脚本。你没法像JS那样import { Button } from 'antd'再单独提取样式——它的变量、mixin、选择器全部在一次编译中摊平。所以“隔离”不是靠语法，而是靠导入顺序、路径控制和CSS层叠的物理约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
