How to override Bootstrap mixin without modifying the actual source code?

Question

I'm using Bootstrap 4 and I would like to change default style of button hover and active states. Those can't be changed with variables because those are hard coded in Sass mixins. For example:

@mixin button-variant($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
  ...

In order to get the style I want, I need to change darken to lighten and then change percents.

I could modify source code but it doesn't sound like a good solution for maintenance. I could also override those values with my custom css file included after Bootstrap but then I basically need to copy-paste whole button source from Bootstrap and modify it. Because there is lot of button variants, there will be lot of overrides which would be unnecessary in case of I can include changes to Bootstrap css.

Best solution would be to override whole button-variant mixin in Bootstrap before compilation so that in compiled Bootstrap file there is only css I want. What would be the best way to do that?

Answer 1

Override the mixin by including your own version after it before compiling.

/scss/site.scss

// libraries
@import 'libraries/bootstrap/bootstrap';

// your custom sass files
@import 'overrides/bootstrap/mixins';

/scss/overrides/bootstrap/mixins.scss

@mixin button-variant($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
  ...

Answer 2

There is no need to modify existing bootstrap files.

Cleanest solution, working for me, is to include all base bootstrap imports in my own bootstrap-custom.scss file and swap original _mixins.scss file with my own, again including all original mixins with exception of my custom _buttons.scss.