Angular 项目生产版本在导入谷歌字体时出现问题答案

【问题标题】：Angular project production build has problem importing google fontsAngular 项目生产版本在导入谷歌字体时出现问题
【发布时间】：2020-02-14 09:39:22
【问题描述】：

我有一个基于最新版本 8.2.9 的 Angular 项目。 Google 字体在使用 ng serve 的测试环境中完美运行。但是，当我在生产服务器上发布项目时，没有加载字体。

style.scss

@import url('https://fonts.googleapis.com/css?family=Nunito:200,600');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

由于上述问题，素材图标无法加载，如图所示。

但是，当我将上述字体加载语句从全局样式 style.scss 移动到 app.component.scss 时。它工作正常！为什么它不适用于全球风格？我在这里ng build/serve --prod ignores scss url imports

发现了类似的问题

【问题讨论】：

另一个解决方案是当我从 angular.json 文件的样式数组中删除材质 css 文件时。
您的angular.json 是否在styles 选项中包含您的全局样式表？
@G.Tranter yes "style.scss" 与材质 css 文件一起作为数组包含在内。正如我之前在评论中所说，当我删除材料 css 文件时，它工作正常。

【解决方案1】：

只需在<head> 标签中的 index.html 中包含谷歌字体，而不是任何 scss 或 css 文件。

它也适用于生产构建。

【讨论】：