Less变量覆盖失败的根本原因是编译链断裂：变量必须在Bootstrap源码解析前定义并注入，否则样式已按默认值固化；正确顺序是先@import variables.less、再重定义变量、然后@import mixins.less、最后@import bootstrap.less，且需禁用bootstrap.min.css、开启javascriptEnabled:true。
Less变量覆盖失败，根本不是值写错了，而是编译链断了——变量必须在Bootstrap源码被解析前就“到位”，否则所有样式都按默认值固化输出，你改的变量压根没参与编译。
为什么在自己的less文件里改@primary-color没用？
Less变量没有作用域隔离，但有严格的线性编译顺序：一旦某行代码引用了@primary-color，它的值就在那一刻被替换成字面量（比如#007bff），后续无论你在哪重定义，都不会影响已生成的CSS。
- 别在
button.less之后才@import "variables.less"——按钮样式早已用默认值编译完了 - 别在组件级
.module.less里写@primary-color: red——它只影响该文件内后续语句，不参与Bootstrap全局构建 - 别依赖
!default兜底：如果Bootstrap源码里已经声明过@primary-color，你的@primary-color: #dc3545 !default会被直接跳过
正确加载顺序必须是：变量 → mixins → bootstrap.less
你不是在“覆盖”变量，而是在Bootstrap编译前注入新值。整个流程只能是一条直线，不能拆、不能换序、不能跨文件隐式传递。
- 新建
src/styles/bootstrap-theme.less，内容严格按此顺序： @import "../../node_modules/bootstrap/less/variables.less";@primary-color: #3498db;@enable-gradients: false;@import "../../node_modules/bootstrap/less/mixins.less";@import "../../node_modules/bootstrap/less/bootstrap.less";- 在入口文件（如
index.tsx）最顶部、任何其他import之前引入：import './styles/bootstrap-theme.less'; - 删掉所有
import 'bootstrap/dist/css/bootstrap.min.css'——它和Less编译冲突，留着必失效
Webpack/Vite中modifyVars不生效？先看javascriptEnabled
modifyVars不是万能开关，它依赖javascriptEnabled: true才能解析Bootstrap里大量使用的JS表达式（比如lighten(@primary-color, 10%)）。关了这个，所有颜色函数都会静默fallback到默认值。
立即学习“前端免费学习笔记（深入）”；
- Webpack（less-loader v8+）：必须在
lessOptions里显式设javascriptEnabled: true - Vite（vite.config.ts）：检查
css.preprocessorOptions.less是否同样设置了该选项 - 别配
include: /node_modules\/bootstrap/——这会让loader跳过你项目里的bootstrap-theme.less，导致modifyVars完全不触发 - 路径别名（如
@/styles）在@import里无效，得用相对路径或改用additionalData注入
Less里没法直接改CSS变量，得靠生成对应规则
Less变量（@primary-color）和CSS变量（--bs-primary）运行阶段完全不同：前者编译成静态值，后者浏览器运行时才计算。想让Less“控制”CSS变量，只能让它输出含--bs-primary: #xxx的CSS规则。
- 局部覆盖要写在容器上：
.my-form { --bs-primary: #7e57c2; }，子元素用var(--bs-primary)才能继承 - 别写
:root .theme-dark { --bs-primary: ... }——:root只匹配<html>，前面加选择器无效 - 按钮状态变量（
--bs-btn-hover-bg、--bs-btn-disabled-bg）必须一并设置，否则交互时会“闪回”默认色 - RGB版本（
--bs-primary-rgb）不会自动同步，你改了--bs-primary，就得手动补上--bs-primary-rgb: 126, 87, 194
最容易被忽略的是：变量查找只认DOM祖先链上最近的有效声明，和选择器权重无关，但和CSS源顺序强相关——后加载的CSS文件里的:root声明，会覆盖先加载的，哪怕它只有一行。
