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

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

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

我希望保持mixin名称相同，而不是使用不同的名称覆盖它，因为它在文件节点\u modules\bootstrap\scss\u buttons.scss中使用，下面的代码根据可用的颜色生成所有按钮：

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

当在custom.scss中的importing bootstrap下面添加新修改的mixin代码时，它不会产生任何效果，因为导入的引导在该代码和默认按钮css编译之后被编译。然而，当在custom.scss中导入bootstrap后添加修改后的mixin代码时，编译后的.css文件中有重复的按钮

---

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

您应该单独导入引导的SCSS文件，而不是整个包，并且应该在引导的

\u mixins.SCSS

之后导入您自己的mixin。这样，您可以在引导的

按钮之前覆盖它们。SCS

将使用它们：

@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";

---

_my-custom-buttons.scs的导入是否必须在新修改的mixin按钮变体定义之后进行？另外，bootstrap推出了一个新的更新的_buttons.scss文件，这让人好奇如果继续下去会发生什么。编辑内容将丢失。这是一种不可避免的妥协吗？我最初的想法是将Bootstrap的

\u buttons.scss

作为

\u My-custom-buttons.scss

复制到您的项目文件夹中，并修改您想要的内容。是的，当您升级引导时，您必须再次重复该过程。但是我刚刚发现，似乎你可以做得容易得多。只需在引导的

\u mixins.scss

之后包含自定义mixin，这样您就可以在引导的

\u按钮之前覆盖它们。scss

将使用它们。请查看我编辑的答案。可能重复的