角度9：从fonts.google.com导入SCSS在生产模式下不起作用

Question

我正在使用以下语法在Angular 9应用style.scss中导入字体：

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

这在我运行ng serve时有效。但是，在生产模式中部署Angular捆绑包时，导入似乎不起作用。生产捆绑包不尝试加载此字体-没有网络请求。此外，Chrome控制台中没有错误。

我在本地安装了可以正常工作的字体-所以我怀疑这与第三方托管的字体有关：

@font-face {
  font-family: Korolev;
  font-weight: 600;
  font-style: normal;
  src: url('assets/fonts/korolev-medium-webfont.ttf');
}

找出错误所在，它与来自Webpack style-loader的injectStylesIntoStyleTag.js有关。当ng serve在开发模式下运行时，这似乎可以解决问题，因为我们可以看到脚本启动的请求，该脚本在加载字体的头部创建了<style>。但是，在生产模式下运行时，加载字体的机制不同或似乎没有起作用。

• 从第三方导入的SCSS是否应该在Angular生产模式下正常工作？

• 如果不建议将import用于第三方字体，在样式表中使用第三方字体的首选机制是什么？

Answer 1

我遇到了同样的问题，我现在通过在他们的 github 上挖掘 this angular's issue 来解决它：

<块引用>

我实际上遇到了这个问题，因为我在 google 字体中引入的 @import 语句没有被呈现为我编译的 css 文件中的第一行。我最近升级了我的 Angular 版本。不知道为什么会发生这种变化，但我通过将我的字体导入分解为 scss 部分文件并在其他任何事情之前导入该部分文件来解决我的情况。结果是我的字体@imports 是我的styles.css 的第一行。

TLDR;
@import 语句必须位于已编译的 css 文件的顶部，否则它们将被忽略。

为此，我创建了一个文件 font.scss，其中包含我所有的 @import，如下所示：

@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
// [...]

然后你需要更新你的 angular.json 以首先加载这个文件：

...
"styles": [
    "src/assets/scss/fonts.scss",
    "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
    "src/styles.scss"
],
...