Bootstrap 4 user variables does not cancel

Question

I have a basic .scss style 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 am trying to override the success variable in my components/variables as follows:

$green: #71c835 !important;

But he continues to raise the bootstrap color variables.scss , which is $green: #28a745 !default;

To create a clear view, I still tried to switch the sequence of these two files as follows:

 // 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 just override bootstrap variables

Answer 1

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

This does not mean setting the value of the green variable to this hex code and ignoring subsequent attempts to change this value.

---

You cannot prohibit changing a variable.

You must write your code in the correct order.

If you want to override ../components/bootstrap/scss/variables from components/variables , then import components/variables after another.

Answer 2

Use the first case and delete !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. Therefore, it takes on the value of a previously declared variable. so delete !default

!important; // always wins.

!default; // if var has already been assigned, take this instead. - Link

---

So now components/variables

  $green: #71c835; 

and ../components/bootstrap/scss/variables

  $green: #28a745; 

Answer 3

Maybe you will create override.scss and place the hem AFTER you are .scss variables

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

Code override.scss:

  $green: #you_code;