Bootstrap SASS Override primary button text color

Question

I am trying to use sass to set the text color of btn-primary to white from it's default grey.

I can see by looking at the default _buttons.scss file that the variable used to set the color is $body-color but if I change this variable to white then obviously all body text also becomes white on a white background.

I have tried just manually setting the color of .btn, but then hovering sets the text back to grey. As Below:

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

.btn {
    color: #fff;
}

How can I override this style?

Answer 1

you can easily change only the button color using the button-variant mixins. Since you only want to change the button color, and not the entire primary theme color, you need to use the button-variant mixins in SASS.

$mynewcolor:teal;

.btn{
    @include button-variant($mynewcolor);
}