如何在不修改实际源代码的情况下覆盖Bootstrap mixin?

问题描述

我正在使用Bootstrap 4，我想更改按钮悬停和活动状态的默认样式.这些变量不能用变量更改，因为这些变量在Sass mixins中进行了硬编码.例如:

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.

我可以修改源代码，但这听起来不是维护的好方法.我还可以使用Bootstrap之后包含的自定义css文件覆盖这些值，但是基本上我需要从Bootstrap复制粘贴整个按钮源并进行修改.因为有很多按钮变体，所以会有很多替代，如果我可以包括对Bootstrap css的更改，这些替代将是不必要的.

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.

最好的解决方案是在编译之前在Bootstrap中覆盖整个按钮变量mixin，以便在已编译的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?

推荐答案

通过在编译之前包含自己的版本来覆盖mixin.

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

/scss/site.scss

/scss/site.scss

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

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

/scss/overrides/bootstrap/mixins.scss

/scss/overrides/bootstrap/mixins.scss

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

这篇关于如何在不修改实际源代码的情况下覆盖Bootstrap mixin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！