Variable overrides do not fully override

Question

I have set up my project via npm install to take advantage of sass overrides. Everything looks to be working, but when I adjust the $theme-colors, it only works on part of the page?

I tried:

$theme-colors: ("primary": #FF9671)

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

and

$primary: #FF9671
$theme-colors: ("primary": #FF9671)
$link: $primary

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

Also as a side note, Bootstrap says that I only need to import:

@import "../bootstrap/scss/functions"
@import "../bootstrap/scss/variables"
@import "../bootstrap/scss/mixins"

However, this results in nothing happing at all, hence I'm having to import the whole bootstrap.scss file to see any results. Which seems like total overkill?

Thanks in advance

Answer 1

Consider the way some of the Bootstrap variables are set in the variables.scss...

$link-color: theme-color("primary") !default;
$component-active-bg: theme-color("primary") !default;

This is different than the way other theme-color() dependent variables (bg-, alert-, text-, etc...) are set (by iterating the theme-colors map). Therefore, instead of importing "functions" and "variables" first, just override the $primary theme-color like this...

$theme-colors: ();
$theme-colors: (
  primary: #FF9671
);

@import "bootstrap";

Demo 1: https://www.codeply.com/go/gX4Ye5iZgp

Or, you can simply override $primary like this...

$primary: #FF9671;
@import "bootstrap";

Demo 2: https://www.codeply.com/go/5tdlvOVTv3

---

Related: Unable to override $theme-color in bootstrap 4

Answer 2

After much tuting and head scratching, I finally noticed that I was pulling in files in the wrong order.

File structure

css/  
|– bootstrap/  
|– custom/  
   _all.sass  
   _variables.sass  
|– main.sass

Original main.sass

@charset "utf-8"

@import "bootstrap/scss/bootstrap"
@import "custom/all"

The custom was at the bottom, when it should be above it. As such:

main.sass

@charset "utf-8"

@import "custom/all"
@import "bootstrap/scss/bootstrap"

I thought the order only mattered in my variables file, which looked like this:

$theme-colors: ("primary": #FF9671)

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

This also made me realise I do not need to @import bootstrap within my variables file. As I am importing in my main.sass. Which now looks like this:

main.sass

@charset "utf-8"

@import "custom/all"
@import "bootstrap/scss/bootstrap"

and hence my variables file is simply as such:

variables.sass

$primary: #845EC2