自定义Bootstrap时引用默认变量配置样式的问题咨询

方案1：拆分Sass导入顺序（推荐，适合大量自定义场景） #

Bootstrap 5的Sass文件已经做了模块化拆分，你可以通过调整导入顺序直接引用内置变量，无需复制变量值：

1. 优先导入Bootstrap的工具函数、默认变量、混合宏文件，提前获取所有内置变量值
2. 定义自定义配置，此时可以直接引用已经加载的Bootstrap内置变量
3. 导入剩余Bootstrap样式模块，你定义的非!default变量会自动覆盖Bootstrap自带的!default同名变量

代码示例：

// 1. 预加载Bootstrap基础能力
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// 2. 定义自定义变量，可直接调用Bootstrap内置变量
$btn-font-weight: $font-weight-bold;
// 其他自定义变量均可在此处定义

// 3. 导入Bootstrap样式模块
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
// 按需导入其他需要的模块，也可以直接导入全量Bootstrap
// @import "~bootstrap/scss/bootstrap";

方案2：CSS变量覆盖（更简便，适合少量改动场景） #

Bootstrap 5默认对所有样式属性暴露了CSS自定义属性，你不需要修改Sass代码，直接在全局样式中覆盖即可：

.btn {
  --bs-btn-font-weight: var(--bs-font-weight-bold);
}

两种方案都不需要复制Bootstrap内置变量，维护成本远低于老方案，Bootstrap版本升级时也不需要同步调整自定义配置。

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