Suppose I have the file _buttons.scss :

.btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
}

And now in my override file 'buttons.scss', I want to remove the color and add my custom font family and weight:

.btn {
      font-family: $custom-font-family;
      font-weight: $custom-font-weight;
}

Now, If I want to use the .btn class on an <a>, it will still take the color of the .btn class from Bootstrap because of the generated CSS file instead of the <a> defined color.

For example in the html:

<a href="#"  data-toggle="dropdown">Attachment <span  data-bind="text: Documents().length">1</span></a>

How can I prevent that?

EDIT : The compiled css will be something like:

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
}

.btn {
  font-family: "Segoe UI", "Segoe UI Light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
}

So, It will still use the #212529 color for the .btn class that is coming from bootstrap.

CodePudding user response：

Adding !import to your CSS property should help.

About !import on w3schools.

.btn {
  font-family: $custom-font-family !important;
  font-weight: $custom-font-weight !important;
}

CodePudding user response：

You have to set manually the color to "unset"

.btn {
  font-family: $custom-font-family;
  font-weight: $custom-font-weight;
  color: unset; /* or "inherit" or whatever, based on your needs */
}

this is the correct way to override the CSS property, be careful that you might need the !important following the CSS rules based on your CSS frameworks needs. In other words, if you can't work on load order, you need to specify the !important (don't if you can) :)

if you don't specify the color as you are doing right now, you are just overriding the other properties and keeping the color