Angular Application, размещенный на Firebase, не импортирующий CSS-файлы - PullRequest
Новая
       14

Angular Application, размещенный на Firebase, не импортирующий CSS-файлы

0 голосов
/ 01 ноября 2019

Довольно понятно. Я пытаюсь импортировать CSS-файлы в мое угловое приложение (например, значки материалов и шрифты 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;
}

Дайте мне знать, если вы хотите увидеть какие-либо другие файлы. Кроме того, он отображается правильно, когда подается.

Ответы [ 2 ]

0 голосов
/ 01 ноября 2019

Чтобы воспользоваться ответом @saidutt, чтобы импортировать эти CDN, необходимо связать их в разделе head вашего файла index.html.

Примерно так: 

<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 в порядке.

0 голосов
/ 01 ноября 2019

Итак, вы предпочитаете использовать CDN. Посмотрите на вкладку вашей сети в браузере, если файлы даже записываются и загружаются. Если нет, попробуйте: импортируйте их в файл index.html.

или

включите их в массив стилей в angular.json файл

...