SASS：覆盖bootstrap scss

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 包含的顺序，所以你的样式会被覆盖。