How to override Bootstrap mixin without modifying

问题:

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?

回答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%);
  ...

回答2:

Overwriting the bootstrap mixins after using them doesn't seem to work - like this issue describes: https://github.com/sass/sass/issues/240

So I ended up with modifying the bootstrap main source-file. This is no beautiful solution, but needed since the order is that important. In my case it looks like this ('bootstrap-sass/assets/stylesheets/bootstrap'):

/*!
 * Bootstrap v3.3.7
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT
 */

// Core variables and mixins
@import "own_variables";
@import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@import "own_mixins";

// ... rest of bootstrap includes which use the mixins to create classes

回答3:

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.

回答4:

To overwrite a mixin, The easiest and cleanest way is:

1. copy the file bootstrap.scss in your own custom folder:

   @import "functions";
   @import "variables";
   @import "mixins";
   @import "root";
   etc...
   

2. Adapt the files paths and add you own file in the list

   @import "../../bootstrap-4.4.1-dist/scss/functions";
   @import "../../bootstrap-4.4.1-dist/scss/variables";
   @import "../../bootstrap-4.4.1-dist/scss/mixins";
   @import "bs-mixins";  <--- put your customized mixins file after the bootstrap mixins
   @import "../../bootstrap-4.4.1-dist/scss/root";
   etc...
   

It makes sense to have all the needed bootstrap features listed together here. It is also the right place to make some cleanup if you don't need all features, in order the reduce the css footprint.