Как связать шрифт Google с моими файлами Nuxt?

Я новичок в SCSS и пытаюсь загрузить локальный шрифт в свой файл SCSS.

Это отлично работает в файле CSS, но в файле SCSS ничего не дает, даже ошибки:

@font-face {
  font-family: "Cairo";
  font-weight: 400;
  font-style: normal;
  src: url(./assets/Fonts/Cairo/CairoBlock-Regular.ttf);
}

Файлы css и scss находятся в одном каталоге, поэтому путь должен быть одинаковым. Что я делаю не так?

Что это ../assets/https:/font...? Это не местный импорт. И я даже не уверен, что можно напрямую так импортировать CDN.

kissu 11.05.2022 15:27

Отвечает ли это на ваш вопрос? Как эффективно загружать шрифты Google в Nuxt

kissu 11.05.2022 15:33

Я обновил вопрос. Я решил попробовать загрузить все шрифты локально.

Nicolas Tuomaala 11.05.2022 17:03

Что вы видите в DOM (devtools)? Не применяется? Кроме того, вы проверили это: stackoverflow.com/q/1567184/8816585?

kissu 11.05.2022 17:12

Это не применяется. Я проверил это, но я использую другой синтаксис.

Nicolas Tuomaala 11.05.2022 17:26

Может быть, есть что-то фундаментальное, что я мог упустить? Я установил только sass глобально, но больше ничего.

Nicolas Tuomaala 11.05.2022 17:51

О, я использовал этот модуль @nuxtjs/style-resources в конфигурации nuxt и попытался установить все файлы scss из styleResources: [] в css: [] в конфигурации nuxt, и все начало работать волшебным образом.

Nicolas Tuomaala 11.05.2022 18:01
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
7
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите, чтобы ваши шрифты загружались правильно, вам нужно как-то связать их со страницей в какой-то момент. Следовательно, размещение ваших файлов SCSS в css недвижимость, вероятно, является правильным решением.

nuxt.config.js

export default {
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['put-your-files-here']
}

В противном случае, вот как загрузить некоторые шрифты правильно с Nuxt.

Другие вопросы по теме