Unable to override $theme-color in bootstrap

Question

It's bootstrap 4.0 with SASS

My style.scss file contains the following code:

@import "../bootstrap/scss/bootstrap";  @import "colors"; @import "main"; 

and _colors.scss file contains the following code:

$bg-white : white;  $theme-colors: (         primary: #333333 ) 

You can see that I am just trying to override the $theme-color('primary') but the problem is this that it does nothing.

And If I shift @import "colors" in the start of the file style.scss It gives me following error:

error ../bootstrap/scss/_forms.scss (Line 284: $color: null is not a color for `rgba')

Actually, the style.scss file compiles to style.css file and that one is linked file.

Question: How I can override the $theme-color in bootstrap-4 when using SASS?

Any help will be appreciated, and Thanks in advance

Cheers.

Answer 1

Update 2021 for Bootstrap 5

Per the guidance in the docs...

"Variable overrides must come after our functions are imported, but before the rest of the imports."

Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing bootstrap.scss

/* custom.scss */ /* change theme colors */ $primary: #362ec4; $secondary: #8f5325; $success: #3e8d63; $info: #7854e4; $warning: #b8c924; $danger: #d62518; /* end custom.scss */  @import '~bootstrap/scss/bootstrap.scss'; 

---

Update 2018 for Bootstrap 4.1

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the default value, and will then be set in all the theme-colors loops (btn-primary, bg-primary, text-primary, etc..)...

/* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables";  $theme-colors: (   primary: #333333; );  /* finally, import Bootstrap */ @import '~bootstrap/scss/bootstrap.scss'; 

Demo: https://www.codeply.com/go/lobGxGgfZE

---

Also see this answer

Answer 2

This got me too. You need to import functions.scss into your scss file before variables.

@import '../../node_modules/bootstrap/scss/functions'; @import 'assets/styles/variables'; @import '../../node_modules/bootstrap/scss/bootstrap'; 

Your paths may differ.

This is with Bootstrap 4 Beta 1.