CODEWITHSUNDEEP
twitter-bootstrapsassbootstrap-4
Sireini
Sireini

Reputation: 4262

Bootstrap 4 custom variables doesn't override

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

Upvotes: 8

Views: 3128

Answers (3)

Maxim Strutinskiy
Maxim Strutinskiy

Reputation: 531

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;

Upvotes: 1

Znaneswar
Znaneswar

Reputation: 3387

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;

Upvotes: 3

Quentin
Quentin

Reputation: 943142

$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.

Upvotes: 5

Related Questions