在Angular CLI

Question

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

在我的styles.scss我有这个：

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

在scss/_theme.scss我有这个：

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

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

所以，我试图覆盖主要颜色变量，以及身体的字体系列。

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

正如您所看到的，主要颜色是正确的颜色（＃ff0000），但字体系列不是＆＃34; Times New Roman＆＃34;，它是引导程序的默认字体系列。

无论如何，如果我改变这样的导入顺序（首先是bootstrap）：

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

我有这种不同的情况：

因此，字体系列属性正在替换为＆＃34; Times New Roman＆＃34;，但现在它使用了引导程序的默认主要颜色并忽略了我的覆盖。

顺便说一句，我显然希望两个变化同时发生。

有什么想法？ 提前谢谢！

Answer 1

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

查看可用变量in bootstrap source code。