Sass - 使用材料 Web 组件设置字体系列

【问题标题】：Sass - Setting the font family with material web componentsSass - 使用材料 Web 组件设置字体系列
【发布时间】：2018-07-02 08:31:29
【问题描述】：

我在我的项目中使用材料 Web 组件，我想更改字体系列。我正在浏览他们的documentation，我试图通过在我的 sass 文件中设置变量来做到这一点：

$mdc-typography-font-family: Comfortaa, sans-serif !default;

但是，这不起作用，在文档中它还说 sass mixin 设置了字体：

mdc-typography-base

如何更改 mixin 以使用不同的字体系列？

【问题讨论】：

你把<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">加到<head>了吗？
是的，我做到了，我脑子里有这个

【解决方案1】：

我通过删除 !default 标志来解决这个问题：

$mdc-typography-font-family: Comfortaa, sans-serif;

另外，不要忘记在 head 标签中嵌入 Google 字体：

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">

【讨论】：

在项目中对我来说没有任何改变，一切仍然有 Roboto 字体
你的设置是什么？你是如何导入组件的？
在我的 app.sass 中，我正在导入像 @import 'material-components-web/material-components-web'; 这样的材料 Web 组件，然后在它下面导入我设置变量的 variables 文件。
你应该先导入变量，然后才是 Material Components。
这将如何工作，然后材料组件中的变量不会覆盖我的变量吗？