Question

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

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

我想保持混入名称不变，而不是使用其他名称覆盖它，因为以下代码中的node_modules \ bootstrap \ scss_buttons.scss文件中使用了混入名称，该代码根据可用的颜色生成所有按钮：< / p>

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

发生的事情是，当在custom.scss中的导入引导程序下面添加了新的经过修改的mixin代码时，由于导入的引导程序在该代码之后被编译并且默认按钮css被编译，因此它没有任何作用。而在custom.scss中导入引导程序后添加修改后的mixin代码时，在已编译的.css文件中按钮存在重复。

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

Answer 1

我将执行以下操作：

导入Bootstrap的核心文件而不是整个文件包
完全跳过其“按钮”组件
创建自己的_buttons.scss版本，然后导入该版本

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@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";

// magic here:
//@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

1 个答案: