修改Bootstrap颜色变量无效，求排查解决方法

核心问题：变量加载顺序搞反了 #

Bootstrap的变量替换逻辑很明确：自定义变量必须在引入Bootstrap核心样式前加载，否则框架默认变量会直接覆盖你的自定义值，这是最常见的踩坑点。

具体排查&修复步骤： #

1. 调整文件引入顺序
   你的custom.scss放在components目录下，找到项目的主入口SCSS文件（比如main.scss或index.scss），确保引入顺序是：

   // 先加载你的自定义变量
   @import './components/custom.scss';
   // 再加载Bootstrap核心样式
   @import 'bootstrap/scss/bootstrap';
   

   如果反过来写，Bootstrap默认变量会先生效，你的自定义值根本没机会替换。

2. 删掉!default声明
   你之前写的$primary: black !default，!default的作用是“只有变量未被定义时才生效”，而Bootstrap已经预先定义了$primary，所以这条声明直接被忽略了。直接写$primary: black;就行。

3. 规范custom.scss的写法
   在custom.scss里直接全局定义变量，不要嵌套在任何选择器里，比如：

   // custom.scss 正确写法
   $primary: #000000;
   $secondary: #6c757d; // 其他变量也可以这么改
   

4. 检查SCSS编译配置
   确保项目安装了sass依赖（别用已废弃的node-sass），同时确认构建工具（Vite、Webpack等）能正确处理SCSS文件的编译，没配置好的话，SCSS变量不会被解析生效。

5. 避免重复引入Bootstrap
   检查项目里有没有其他组件单独引入Bootstrap样式，重复引入会导致后面的加载覆盖你的自定义变量，确保只在主入口文件里引入一次Bootstrap。

内容的提问来源于stack exchange，提问作者André Santos