Bootstrap 4 custom variables doesn't override

Question

I have an main styles.scss like this:

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

// Core variables and mixins
@import "../components/bootstrap/scss/functions";
@import "../components/bootstrap/scss/mixins";
@import "components/variables";
@import "../components/bootstrap/scss/variables";

I try to override the success variable in my components/variables like this:

$green: #71c835 !important;

But it keeps picking up the color of the bootstrap variables.scss which is $green: #28a745 !default;

To create a clear view I allready tried to switch the sequence of these two files like this:

// Core variables and mixins
@import "../components/bootstrap/scss/functions";
@import "../components/bootstrap/scss/mixins";
@import "../components/bootstrap/scss/variables";
@import "components/variables";

It really drives me crazy how can I simply override the bootstrap variables

Answer 1

$green: #71c835 !important; means Set the value of the green variable to this hex code followed by important.

It doesn't mean Set the value of the green variable to this hex code and ignore subsequent attempts to change that value.

---

You can't prevent a variable from being changed.

You have to write your code in the right order.

If you want to override ../components/bootstrap/scss/variables from components/variables then import components/variables after the other one.

Answer 2

Use the first case and remove !default

.....
@import "components/variables";
@import "../components/bootstrap/scss/variables";

Copy paste the variable you want to override and change the value. and remove the !default attribute. Compile it again.

The !default attribute works like reverse of !important. So it takes takes the value of previously declared variable. so remove the !default

!important; //always wins.

!default; //if the var already has been assigned take that one instead. -Reference

---

So now components/variables

 $green:   #71c835;

and ../components/bootstrap/scss/variables

 $green:   #28a745;

Answer 3

Maybe you create override.scss and put hem AFTER you're variables.scss

@import "../components/bootstrap/scss/variables.scss";
@import "custome/scss/override.scss";

Code override.scss :

 $green: #you_code;