必须先引入自定义变量文件再引入第三方Less文件，因Less变量首次声明即锁定，后续同名声明（不含!important）无效；@import为静态拼接，顺序决定最终变量值。
必须在第三方库的 Less 文件之前引入自定义变量文件，否则覆写无效。 这不是“建议”，而是 Less 编译机制决定的硬性规则：变量首次声明即锁定值，后续同名声明（不含 !default）完全被忽略。
为什么入口文件里 import 顺序决定成败
Less 的 @import 是静态拼接，不是运行时加载。最终 CSS 中所有样式规则和变量值，都由入口文件中 @import 的书写顺序决定。比如你写：
@import "~antd/lib/style/themes/default.less"; @import "variables.less";
那 @primary-color 在 default.less 里已赋值为 #1890ff，后面 variables.less 再写 @primary-color: #52c418; 就彻底失效。
- 正确顺序必须是：
@import "variables.less";→@import "~antd/lib/style/themes/default.less";→@import "~antd/dist/antd.less"; - 如果你用的是 Bootstrap，也一样：
@import "custom-variables.less";必须在@import "~bootstrap/scss/variables";之前，且要在@import "~bootstrap/scss/functions";之后（因部分变量依赖函数） - 不要试图在组件级
.btn { @color: red; }里重定义变量——块级作用域里的@color和全局@primary-color不是同一个东西
如何安全地组织 variables.less
这个文件必须干净、扁平、无嵌套、无选择器，只做一件事：声明顶层变量。任何花哨逻辑都会破坏可覆盖性。
- 开头加注释
// 全局主题变量，方便搜索和协作识别 - 所有变量统一用
!default声明，例如：@primary-color: #52c418 !default;—— 这样既允许被modifyVars覆盖，又不会因导入顺序错乱而意外失效 - 禁止在该文件里
@import其他含变量定义的文件（比如mixins/border-radius.less），否则它内部的变量会悄悄覆盖你刚设好的值 - 颜色、间距、圆角等值全部来自变量，禁用字面量，例如写
background: @primary-color;，而不是background: #1890ff;
Webpack 中 modifyVars 和文件导入别混用
modifyVars 是 less-loader 提供的构建期注入能力，它和 @import 是两套独立机制，强行混合容易翻车。
-
modifyVars传参时，key 必须带@符号，例如'@primary-color'，少一个@就完全不生效 - 如果同时用了
@import "variables.less";和modifyVars，后者优先级更高，但前提是变量名**完全一致**（@text-color≠@TextColor） - CI 构建或本地用
lessc编译时，modifyVars不起作用，只能靠@import顺序；所以两套逻辑要保持同步，不能一套靠文件、一套靠配置 - 变量值若含 Less 函数，如
fade(@primary-color, 80%)，modifyVars中必须传字符串：'fade(#52c418, 80%)'，不能传 JS 对象或计算结果
真正容易被忽略的点在于：你以为改了变量，其实只是改了“声明”，没改“使用”。只要样式规则里还藏着一个 border: 1px solid #d9d9d9;，那个 @border-color-base 再怎么覆写都白搭——Less 管不了已经写死的字面量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
