2

First of all I would like to mention this question: Customize bootstrap 4 variables using it's own variables?, where it seems the same question has been asked but without fruitful answer so I thought I would ask again with a very specific example.

I basically want to overwrite some of bootstrap 4's default variables. In the example below I want to overwrite $font-size-base. I followed the recommended approach of the bootstrap documentation but it only seems to be partially working. Bootstrap's default variables (in _variables.scss) reuse other defined variables. For instance : $input-btn-font-size: $font-size-base !default;. When changing $font-size-base with the approach below however, it doesn't affect $input-btn-font-size.

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
$font-size-base: 0.9rem;
$secondary: $gray-400;
@import "node_modules/bootstrap/scss/bootstrap";

On the other hand if I use the next approach where I import the variables later, then I do get the desired result where all variables that depend on $font-size-base get changed as well. This however is not the recommended approach and becomes clear when you want to define a variable that depends on a default variable. See $secondary: $gray-400;, this then throws a compile error given that $gray-400 is unknown.

@import "node_modules/bootstrap/scss/functions";
$font-size-base: 0.9rem;
$secondary: $gray-400;
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/bootstrap";

What is the recommended solution here?

Glenn D.J.
  • 1,874
  • 1
  • 8
  • 19

1 Answers1

1

Separate the override variables....

The only overrides that need to follow the /variables import are those that reference variables (ie: $secondary: $gray-400;).

If you just want to override a variable that doesn't reference another (ie: $font-size-base: 2.9rem;) that would go before the /variables import...

/* simple overrides */
$font-size-base: 2.9rem;

@import "bootstrap/functions";
@import "bootstrap/variables";

/* var dependent overrides */
$theme-colors: (
  secondary: $gray-400
);

@import "bootstrap";

https://www.codeply.com/go/wpc3XKQ8TG

Note: To override a theme color such as secondary you must update the theme-colors map.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I've considered this option but then I thought: "What if my `$font-size-base` would reference a different variable, then it wouldn't work. So there must be something I'm missing." I guess I shouldn't have made it more complex than it needed to be. – Glenn D.J. Jul 23 '19 at 17:31
  • Normally base variables aren't dependent on other vars. – Carol Skelly Jul 23 '19 at 19:32