Angular 托管在 Firebase 上的应用程序未导入 css 个文件

Question

非常不言自明。我正在尝试将 css 文件导入我的 angular 应用程序（诸如 material 图标和 google 字体之类的东西）。我已将导入语句添加到 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;
}

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

Answer 1

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

或

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

Answer 2

要以@saidutt 的回答为基础，要导入那些 CDN，您应该 link 在 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 很好。

Angular 托管在 Firebase 上的应用程序未导入 css 个文件

Angular Application hosted on Firebase not importing css files

firebase

firebase-hosting

angular