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

Question

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

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

我希望保持 mixin 名称相同，而不是使用不同的名称覆盖它，因为它在以下代码中的文件 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 文件中存在重复按钮。

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

Answer 1

你应该单独导入 Bootstrap 的 SCSS 文件而不是整个包，你应该在 Bootstrap 的 _mixins.scss 之后导入你自己的 mixins。这样您就可以在 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";