托管在 Firebase 上的 Angular 应用程序不导入 css 文件答案

【问题标题】：Angular Application hosted on Firebase not importing css files托管在 Firebase 上的 Angular 应用程序不导入 css 文件
【发布时间】：2019-11-01 18:50:54
【问题描述】：

相当不言自明。我正在尝试将 css 文件导入我的 Angular 应用程序（材料图标和谷歌字体之类的东西）。我已将导入语句添加到 styles.css（全局样式文件）中。

由于某种原因，当它托管在 firebase 上时，css 文件没有被导入。在这一点上，我完全被难住了。我的代码如下：

@import url(https://fonts.googleapis.com/css?family=Lobster&display=swap);
@import url(https://fonts.googleapis.com/css?family=Nunito&display=swap);
@import url(https://fonts.googleapis.com/css?family=Coming+Soon&display=swap);
@import url(https://fonts.googleapis.com/css?family=Chilanka&display=swap);

i {
  color: #2b2b26;
  margin-right: 1vw;
  margin-left: 1vw;
}

i:hover {
  color: #f58a18;
}

.icon-container {
  text-align: center;
}

如果您想查看任何其他文件，请告诉我。此外，它在服务时正确显示。

【问题讨论】：

标签： angular firebase firebase-hosting

【解决方案1】：

要以@saidutt 的回答为基础，要导入这些 CDN，您应该将它们链接到 index.html 文件的 head 部分。

像这样：

<head>
  <!-- your other metadata... -->

  <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Coming+Soon&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Chilanka&display=swap" rel="stylesheet">

</head>

另一种方法是将这些 CSS 文件下载到您的项目文件夹中，并将它们包含在 angular.json 文件的样式表数组中：

  "styles": [
          "src/googleapis1.css",
          "src/googleapis2.css",
          "src/googleapis3.css",
          "src/googleapis4.css"
        ],

...但我个人认为 CDN 很好。

【讨论】：

谢谢一百万。我将它们添加到头部，现在一切都很棒！
不客气！如果您觉得有帮助，请选择我的答案。 :)

【解决方案2】：

因此，您更喜欢使用 CDN。如果文件甚至被记录和加载，请查看浏览器中的网络选项卡。如果不试试这些：将它们导入到您的 index.html 文件中。

或

将它们包含在 angular.json 文件中的样式数组下

【讨论】：