SASS：覆盖自举SSS

Question

这是我的styles.scss文件的内容：

// Core variables and mixins
@import "variables.scss";
@import "mixins.scss";
// Global CSS
@import 'bootstrap/scss/bootstrap.scss';
@import "global.scss";
@import "nav.scss";
@import "resume-item.scss";
@import "bootstrap-overrides.scss";

使用此导入顺序，可以正确加载字体：

但是，如果我写@import 'bootstrap/scss/bootstrap.scss'; @import "global.scss"; 字体未加载：

我不太清楚为什么不应用它。

_global.scss文件是：

h1, h2, h3, h4, h5, h6 {
  @include heading-font;
  font-weight: 700;
  text-transform: uppercase;
  color: $gray-800;
}

而heading-font是在_mixins.scss声明的mixin：

@mixin heading-font {
  font-family: 'Saira Extra Condensed', serif;
}

有任何想法吗？

Answer 1

bootstrap.scss包含它自己的_type.scss文件，作为交换，该文件一开始就包含以下样式：

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: $headings-margin-bottom;
    font-family: $headings-font-family;
    font-weight: $headings-font-weight;
    line-height: $headings-line-height;
    color: $headings-color;
}

因此，由于scss include的顺序，您的样式只会被覆盖。