twitter-bootstrap - Customizing Bootstrap using default Bootstrap variables

Question

I recently started the process of customizing Bootstrap for a project. We're on Bootstrap v5.1.1 for what it's worth.

I understand that because of !default I need to define my customizations before importing Bootstrap variables. I've run into an issue where I want to use a default variable to define a customization. More specifically I'm trying to set $btn-font-weight to bold. The line I tried is: $btn-font-weight: $font-weight-bold;. This doesn't work because I'm not customizing $font-weight-bold so it doesn't get defined until importing Bootstrap's defaults.

I found this question which recommends copying the Bootstrap variable as-is into the customization sass, but the answer is 6 years old so I'd like to know if there's a better way.

标签： twitter-bootstrapsassbootstrap-5

Answer 1

在调用 Bootstrap 模块之前定义变量是改变 Bootstrap 自身构建方式的最佳（也是唯一）方法。Bootstrap 自己建议这样做：https ://getbootstrap.com/docs/4.0/getting-started/theming/ ，来自文章：

同一个 Sass 文件中的变量覆盖可以在默认变量之前或之后。但是，当覆盖 Sass 文件时，您的覆盖必须在导入 Bootstrap 的 Sass 文件之前进行。

我见过的最好的方法是创建一个包含所有覆盖变量的 _bootstrap-settings.scss 文件，然后在调用引导模块之前 @import 该文件，如下所示：

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";