根据帖子Reopen SASS Mixins,可以覆盖 mixins。但是,如果您在调用import "bootstrap";
Bootstrap 中定义的之前定义了自定义的,则会覆盖它。另一方面,如果你把它放在导入之后,那么在你重新定义 mixin 时,所有的 Bootstrap 代码都已经完成编译(参见问题 #240和问题 #420)。将来可能会增加对后一种选项的支持。
在那之前,我能想到的一个选项(尚未测试)是从_bootstrap.scss中分离出变量和混合,以便您可以在使用之前重新定义混合。
首先,注释掉_bootstrap.scss中的前两个 import 语句:
// Core variables and mixins
//@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
//@import "bootstrap/mixins";
然后在导入 Bootstrap 的 SASS 文件中,应将其更改为包含以下内容:
$btnPrimaryBackground: #f00;
// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Override of mixin for form field states
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
// customization here
}
@import "bootstrap";
在此工作流程下,您仍将编辑供应商文件,但至少您可以将其限制为仅注释掉的几行。