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

Question

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

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

为了获得我想要的风格,我需要改变变暗以减轻然后改变百分比.

我可以修改源代码但它听起来不是一个很好的维护解决方案.我也可以使用Bootstrap后包含的自定义css文件覆盖这些值,但是我基本上需要从Bootstrap复制粘贴整个按钮源并对其进行修改.因为有很多按钮变体,所以在我可以包含对Bootstrap css的更改的情况下,将会有许多覆盖是不必要的.

最好的解决方案是在编译之前覆盖Bootstrap中的整个按钮变量mixin,以便在编译的Bootstrap文件中只有我想要的CSS.最好的方法是什么？

Answer 1

在编译之前通过在其后包含您自己的版本来覆盖 mixin。

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

我得到了这个工作，但似乎它并不比在 Bootstrap 之后包含您自己的自定义样式更好。由于覆盖 Bootstrap 变量，只有我自己的风格才有效，因为 Bootstrap 变量有 !default。但是如果我覆盖 mixins，初始 mixin 仍然会被编译，并且会有很多重复的代码。到目前为止，我能想到的最好方法是注释掉主文件中的原始源代码并包含您自己的自定义版本。//@导入“按钮”；@import“覆盖/按钮”； (2认同)

Answer 2

无需修改现有的引导程序文件。

对我有用的最干净的解决方案是将所有基本引导程序导入包含在我自己的bootstrap-custom.scss文件中，并将原始_mixins.scss文件与我自己的文件交换，再次包括除我的自定义_buttons.scss之外的所有原始 mixin 。