必须在第三方库Less文件之前引入自定义变量文件，否则覆写无效；因Less@import是静态拼接，变量首次声明即锁定，后续同名声明（不含!important）被忽略。
必须在第三方库 Less 文件之前引入自定义变量文件，否则覆写无效。这不是建议，是 Less 编译机制决定的硬性规则：变量首次声明即锁定值，后续同名声明（不含 !default）完全被忽略。
为什么 @import 顺序错了变量就失效
Less 的 @import 是静态文本拼接，不是模块加载。整个编译过程把所有导入内容按书写顺序“扁平合并”成一个大文件，变量查找只看“从上到下第一次出现的位置”。比如：
@import "~antd/lib/style/themes/default.less"; // 这里已定义 @primary-color: #1890ff; @import "variables.less"; // 这行的 @primary-color: #52c418; 被彻底忽略
结果所有组件都用的是 Ant Design 默认蓝，而不是你期望的绿色。
- 正确顺序必须是：
@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";之后（因部分变量依赖函数） - Webpack 中 less-loader 可能并行处理多个入口，导致
variables.less被多次引入、变量反复覆盖，需检查构建配置是否禁用了@import (once)或误设了include范围
如何安全地组织 variables.less
这个文件必须干净、扁平、无嵌套、无选择器，只做一件事：声明顶层变量。任何花哨逻辑都会破坏可覆盖性。
- 开头加注释
// 全局主题变量，方便搜索和协作识别 - 所有变量统一用
!default声明，例如：@primary-color: #52c418 !default;—— 这样既允许被modifyVars覆盖，又不会因导入顺序错乱而意外失效 - 禁止在该文件里
@import其他含变量定义的文件（比如mixins/border-radius.less），否则它内部的变量会悄悄覆盖你刚设好的值 - 颜色、间距、圆角等值全部来自变量，禁用字面量，例如写
background: @primary-color;，而不是background: #1890ff;
modifyVars 和文件导入别混用
modifyVars 是 less-loader 提供的构建期注入能力，它和 @import 是两套独立机制，强行混合容易翻车。
-
modifyVars传参时，key 必须带@符号，例如'@primary-color'，少一个@就完全不生效 - 如果同时用了
@import "variables.less";和modifyVars，后者优先级更高，但前提是变量名**完全一致**（@text-color≠@TextColor） - Ant Design 5 中需禁用 CSS-in-JS 才能让
modifyVars生效；且必须启用javascriptEnabled: true，否则内联 JS 表达式（如colorPalette('@primary-color', 5)）会静默 fallback 到默认值
最麻烦的地方在于：变量冲突不报错、不警告、不中断构建，只悄悄替换掉你认为“应该生效”的那个值。放弃“靠顺序控制变量”，转而用带业务语义的长变量名 + 单点定义约束，才是长期可维护的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
