Bootstrap自定义scss中变量赋值问题：无法将$orange赋值给$primary

兄弟，我太懂你折腾半天没搞定的烦躁了！你的问题核心是没摸透Bootstrap SCSS变量的加载逻辑和!default标记的作用，咱们一步步把它捋明白。

首先得说清楚：Bootstrap里的所有内置变量（比如$orange、默认的$primary）都是带!default声明的，这个标记的意思是**“如果这个变量还没被定义过，就用我给的默认值；如果已经被定义了，就用已有的值”**。

你之前的两种写法都踩了顺序的坑：

• 要是先导入变量文件和完整Bootstrap，再给$primary赋值，这时候Bootstrap已经用原来的$primary编译完所有样式了，你后面改的$primary只是个孤立的变量，根本影响不了已经生成的CSS；
• 要是先赋值$primary: $orange再导入变量文件，那$orange还没被Bootstrap定义，编译器根本不知道它是什么，自然也不会生效。

正确的写法应该是这样的，严格按照这个顺序来：

// 第一步：先导入Bootstrap的变量文件，这样你就能拿到内置的$orange变量定义
@import '../bootstrap-5.2.3/scss/_variables';

// 第二步：在这里重新定义$primary，把它赋值为$orange
// 因为$primary之前是!default标记的，现在你重新定义会直接覆盖默认值
$primary: $orange;

// 第三步：最后导入完整的Bootstrap，它会用你新定义的$primary来编译所有组件样式
@import "../bootstrap-5.2.3/scss/bootstrap";

要是你想自己定义$orange的颜色值，再把它赋值给$primary，那顺序可以调整成这样：

// 先自定义你想要的$orange颜色
$orange: #ff7600;

// 再导入Bootstrap变量文件，这时候你的$orange会覆盖Bootstrap的默认$orange
@import '../bootstrap-5.2.3/scss/_variables';

// 把$primary设为你自定义的$orange
$primary: $orange;

// 最后导入完整Bootstrap
@import "../bootstrap-5.2.3/scss/bootstrap";

这样编译出来的CSS就会把所有原本用$primary的地方都换成你想要的橙色啦！

备注：内容来源于stack exchange，提问作者Melon Eusk