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

Question

我正在使用 Bootstrap 4，我想更改按钮悬停和事件状态的默认样式。这些不能用变量更改，因为它们是在 Sass 混合中硬编码的。例如:

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