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

Answer 2

使用它们后覆盖bootstrap mixins似乎不起作用 - 就像这个问题描述的那样： https://github.com/sass/sass/issues/240

所以我最终修改了bootstrap主源文件。这不是一个美丽的解决方案，但需要，因为订单很重要。就我而言，它看起来像这样（＆＃39; bootstrap-sass / assets / stylesheets / bootstrap＆＃39;）：

/*!
 * 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

Answer 3

要覆盖混合，最简单，最干净的方法是：

将文件bootstrap.scss复制到您自己的自定义文件夹中：

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

调整文件路径并在列表中添加您自己的文件

@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...

这里列出所有必需的引导程序功能很有意义。如果您不需要所有功能，也可以进行清理，以减少CSS占用空间。

Answer 4

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

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

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

4 个答案: