CODEWITHSUNDEEP
cssbootstrap-4sass
Milad
Milad

Reputation: 63

Can't use default Bootstrap colors in Sass

I imported the bootstrap scss using the following code

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

I can even change default bootstrap variables like :

$border-radius: 1rem;

But the thing is that I can't use bootstrap colors in my own css selectors like this, Why the following code doesn't work? It doesn't change the color.

aside a {
  color: $success;
}

Upvotes: 1

Views: 414

Answers (3)

Milad
Milad

Reputation: 63

There was another !important rule in the stylesheet that was overriding the link color.

a {
    color : white !important
}

Upvotes: -2

Monzoor Tamal
Monzoor Tamal

Reputation: 810

use like this

@import "style/variables";
@import "node_modules/bootstrap/scss/bootstrap";

@import "style/my_other_SCSS

in variables.scss

$border-radius: 1rem;

in my_other_SCSS.scss

aside a {
  color: $success;
}

this will work.

Upvotes: 1

disinfor
disinfor

Reputation: 11533

The issue is that $success isn't set as a SASS/SCSS variable, but rather a CSS var, e.g --success:

aside a {
  color: var(--success);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<aside>
<a href="#">link</a>
</aside>

Here's the documentation: https://getbootstrap.com/docs/4.0/getting-started/theming/#available-variables

Upvotes: 1

Related Questions