Overriding Bootstrap SCSS Variables

0
votes

What is the best way to override variables?

I found the following order works:

@import "bootstrap/_functions.scss";

$primary: red;

@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

But what if I want to use a variable from Bootstrap? For example:

@import "bootstrap/_functions.scss";

$primary: $red;

@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

This doesn't compile because the $red variable isn't defined.

I've tried this order:

@import "bootstrap/_functions.scss";    
@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

$primary: $red;

Which works but only for some elements. For example bootstap/_variables.scss includes:

$link-color: $primary !default;

The $link-colour variable doesn't use the override and instead uses the default value.

Any ideas?

1
csstwitter-bootstrapsassbootstrap-5

1 Answers

0
votes

I think you'd have to set any other vars that use $link-color (ie: $btn-link-color) and merge the new colors into the $theme-colors map...

@import "functions";
@import "variables";
@import "mixins";

$primary: $red;
$link-color: $primary;
$btn-link-color: $primary;

$theme-colors: map-merge(
  $theme-colors,
  (
    "primary": $primary
  )
);

@import "bootstrap";

Demo