在自定义变量文件中访问Bootstrap现有变量的问题咨询

为什么先导入自定义变量无法访问Bootstrap原变量？ #

Bootstrap的SCSS变量几乎都带有!default标记，比如：

$primary: #0d6efd !default;

这个标记的作用是：只有当变量未被定义时，才会使用这个默认值。

你当前的导入顺序是先导入自定义variables.scss，再导入Bootstrap变量文件：

// Custom Variables
@import 'variables';
// Variables
@import 'bootstrap/scss/variables';

如果你的自定义文件里尝试引用Bootstrap的变量，此时Bootstrap变量还没被导入，自然处于未定义状态，导致报错。而导入Bootstrap变量后，它只会给那些你没定义的变量设置默认值，但这时候自定义文件已经执行过了，没法回溯引用这些变量。

重复导入Bootstrap变量的方式是否正确？ #

这种导入方式是可行且合理的，核心逻辑是利用!default的特性分三步处理：

1. 第一次导入Bootstrap变量：所有带!default的变量都会被初始化赋值，此时你可以在自定义文件里直接引用这些原生变量。
2. 导入自定义变量：你可以在这里用Bootstrap原生变量来定义自己的变量，或者直接覆盖Bootstrap的变量（因为自定义变量没有!default，会覆盖之前的默认值）。
3. 第二次导入Bootstrap变量：由于变量已经被赋值（要么是第一次的默认值，要么是你自定义的覆盖值），!default标记会失效，不会覆盖你自定义的变量，同时能确保Bootstrap后续的组件代码使用的是最终的变量值。

对应的代码示例：

// 先初始化Bootstrap所有默认变量
@import 'bootstrap/scss/variables';
// 自定义变量：可以引用Bootstrap原生变量，也可以覆盖
@import 'variables';
// 再次导入：确保变量最终状态被Bootstrap后续代码使用
@import 'bootstrap/scss/variables';

需要注意的是，最新的Dart Sass会缓存已导入的文件，第二次导入Bootstrap变量文件不会重复执行冗余代码，只会处理变量的!default逻辑，所以不用担心性能问题。

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