0

I can't override bootstrap variables from my main.scss file

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

$primary: green;

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

I'm trying to override default value of bootstrap's scss variables, but it wasn't apply and all I see is the default color

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
user21000937
  • 1
  • 1
  • Have you tired to move down your variable? So that you first import the bootstrap.scss then declarer $primary: green; – Wahlstrommm May 08 '23 at 10:56

1 Answers1

0

You are doing a mistake. Remove these lines:

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

You don't need to import these because these are already present in the bootstrap.scss:-

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

So, your final code should be like this:-

$primary: green;

@import "node_modules/bootstrap/scss/bootstrap.scss";
Developer
  • 1,297
  • 1
  • 4
  • 15