文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在不编辑核心文件的情况下修改Bootstrap 4混入

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

Stack Overflow用户

提问于 2019-06-01 20:43:22

回答 1查看 1.2K关注 0票数 0

因此，基本上，我正在尝试修改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中的导入引导程序下面添加新的修改后的mixin代码时，它不会有任何效果，因为在该代码之后编译导入的引导程序，并编译默认按钮css。然而，当在custom.scss中导入引导程序后添加修改后的混合代码时，在编译的.css文件中会有重复的按钮。

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

mixins

scss-mixins

sass

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-01 20:58:45

您应该单独导入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";

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56406870

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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