Unable to override $theme-color in bootstrap 4

Question

It\'s bootstrap 4.0 with SASS

My style.scss file contains the following code:

@import \"../bootstrap/scss/bootstrap\";

@im         


        

Answer 1

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";

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

---

Also see this answer