0

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Shmoopy
  • 632
  • 5
  • 15
  • The old question you mentioned is an entirely different bootstrap-sass project before Bootstrap actually used SASS. – Carol Skelly Oct 15 '21 at 15:00

1 Answers1

-1

Defining the variables before calling the Bootstrap modules is the best (and only) way to change the way Bootstrap builds itself. It's how Bootstrap themselves recommends to do it: https://getbootstrap.com/docs/4.0/getting-started/theming/, from the article:

Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.

The best way I've seen it done is to create a _bootstrap-settings.scss file with all of your override variables and then @import that file before calling your bootstrap modules, like so:

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

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";
KoldBane
  • 207
  • 2
  • 13