无法从main.scss文件覆盖Bootstrap Sass变量问题咨询

问题出在代码顺序上：Bootstrap的variables.scss里已经通过!default定义了$primary变量，Sass中后定义的变量无法覆盖之前已存在的同名称变量（除非用!important，但不推荐）。你现在先导入了Bootstrap的变量文件，再定义自己的$primary，自然不会生效。

修正后的代码要把变量定义放在所有Bootstrap核心文件导入之前：

// 先自定义要覆盖的变量
$primary: green;

// 再导入Bootstrap的基础文件
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// 最后导入完整的Bootstrap样式
@import "node_modules/bootstrap/scss/bootstrap.scss";

如果不需要单独拆分导入基础文件，还可以更简化——因为bootstrap.scss内部已经包含了functions、variables、mixins这些依赖，直接这样写就行：

$primary: green;
@import "node_modules/bootstrap/scss/bootstrap.scss";

这样Bootstrap加载自身变量时，会检测到$primary已经被定义，就不会使用默认值了。

内容的提问来源于stack exchange，提问作者user21000937