如何在不编辑核心文件的情况下修改 Bootstrap 4 个 Mixins

Question

所以基本上，我正在尝试修改 bootstrap 4 中的按钮变体 mixin。代码所在的核心文件是 bootstrap\scss\mixins，文件名是 _buttons.scss.在我的 custom.scss 中，我有以下代码：

@import "../../node_modules/bootstrap/scss/bootstrap";

我想保持混合名称相同，而不是使用不同的名称覆盖它，因为它在以下生成所有按钮的代码中的文件 node_modules\bootstrap\scss_buttons.scss 中使用基于可用颜色：

@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}

发生的情况是，当在 custom.scss 中导入 bootstrap 下面添加新的修改后的 mixin 代码时，它没有任何效果，因为导入的 bootstrap 在该代码之后编译并且默认按钮 css 被编译。然而，当在 custom.scss 中导入 bootstrap 后添加修改后的 mixin 代码时，编译的 .css 文件中存在重复的按钮。

如何在不编辑核心 bootstrap 文件的情况下修改 mixin 中的代码？

Answer 1

您应该单独导入 Bootstrap 的 SCSS 文件而不是整个包，并且您应该在 Bootstrap 的 _mixins.scss 之后导入您自己的 mixin。这样您就可以在 Bootstrap 的 _buttons.scss 使用它们之前覆盖它们：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

@import "my-custom-mixins";

// rest of Bootstrap imports (see bootstrap.scss):
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "my-custom-buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/print";

如何在不编辑核心文件的情况下修改 Bootstrap 4 个 Mixins

How to Modify Bootstrap 4 Mixins without Editing Core Files

sass

mixins

bootstrap-4

scss-mixins