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

问题

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.

来源：https://stackoverflow.com/questions/39707334/how-to-override-bootstrap-mixin-without-modifying-the-actual-source-code

标签

twitter-bootstrap

Sass

mixins