SASS：覆盖引导程序 scss答案

【问题标题】：SASS: Overriding bootstrap scssSASS：覆盖引导程序 scss
【发布时间】：2018-01-19 05:59:58
【问题描述】：

这是我的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 "global.scss"; 之后写@import 'bootstrap/scss/bootstrap.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;
}

有什么想法吗？

【问题讨论】：

在引导之后加载您的自定义 SASS 。使用自己的 CSS 中的标题标签进行引导。
我不太明白你的意思...我应该遵循什么规则吗？将我的自定义文件放在引导程序之前，即？

标签： twitter-bootstrap sass bootstrap-4

【解决方案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 包含的顺序，您的样式会被简单地覆盖。

【讨论】：