在 Angular CLI 中导入订单主题引导

Question

我在尝试在 Angular Cli 中为引导创建自定义主题时遇到了一些问题。

在我的styles.scss 我有这个：

@import "scss/_theme.scss";  
@import "~bootstrap/scss/bootstrap";

在scss/_theme.scss 我有这个：

$theme-colors: (
    "primary": #ff0000
);

body {
    font-family: 'Times New Roman'
}

所以，我正在尝试覆盖主要颜色变量以及正文的字体系列。

由于某种原因，我得到了这个：

如您所见，原色是正确的（#ff0000）但字体系列不是“Times New Roman”，它是引导程序的默认字体系列。

无论如何，如果我像这样更改导入的顺序（首先引导）：

@import "~bootstrap/scss/bootstrap";
@import "scss/_theme.scss";  

我有这个不同的场景：

因此，字体系列属性被替换为“Times New Roman”，但现在它使用引导程序的默认原色并忽略我的覆盖。

顺便说一句，我显然希望这两项更改同时发生。

有什么想法吗？ 提前致谢！

Answer 1

您正在以两种不同的方式覆盖引导程序。对于颜色，您（正确）使用 sass 变量，对于字体，您直接设置 css 属性。因为应该先声明 sass 变量，然后再导入引导程序，所以您的方案 A 对字体按预期工作。但是因为后来声明的 css 属性更重要，所以您的方案 B 适用于正文字体。我建议您通过 sass 变量 $font-family-base 或 $font-family-sans-serif 切换字体，并像在第一个示例中那样首先包含您的主题文件。

查看可用变量in bootstrap source code。