Попытка изменить шрифт моего проекта VUE по умолчанию не работает - PullRequest
Новая
       44

Попытка изменить шрифт моего проекта VUE по умолчанию не работает

0 голосов
/ 04 августа 2020

Я впервые начинаю с проекта в vue. Для его создания я только установил @ vue / cli и выполнил команду vue create myproject. Я уже создал некоторые компоненты и общую таблицу стилей для управления цветами. В эту таблицу стилей я пытаюсь добавить несколько шрифтов, которые я загрузил из шрифтов Google и которые я импортировал в свой проект, внутри новой папки. это моя таблица стилей с именем _variables.s css

$mainFont: 'RalewayRegular';
$mainFontSemiBold: 'RalewaySemiBold';
$mainFontItalic: 'RalewayRegularItalic';

$primaryColor: #fff;
$secondaryColor: #dce0e6;
$tertiaryColor: #f0f4f7;
$quaternaryColor: #233240;
$quinaryColor: #0e5fa4;
$senaryColor: #14a30f;
$septenaryColor: #cd3c2d;
$octonaryColor: #6C757D;
$undenaryColor: #7e848c;
$duodenaryColor: #19b4c2;

/* Fonts
-------------------------*/

@font-face {
    font-family: 'RalewayRegular';
    src: url(../fonts/Raleway-Regular.ttf);
}

@font-face {
    font-family: 'RalewaySemiBold';
    src: url(../fonts/Raleway-SemiBold.ttf);
}

@font-face {
    font-family: 'RalewayRegularItalic';
    src: url(../fonts/Raleway-MediumItalic.ttf);
}

/* Title
-------------------------------- */
h1 {
    font-family: RalewaySemiBold, Arial, sans-serif;
    font-size: 22px !important;
    line-height: 24px;
    color: $quinaryColor;
  }
  h2 {
    font-family: RalewayRegular, Arial, sans-serif;
    font-size: 18px !important;
    line-height: 24px;
    color: $uiTypographyColor;
  }
  h3 {
    font-family: RalewaySemiBold, Arial, sans-serif;
    font-size: 18px !important;
    line-height: 22px;
    color: $quinaryColor;
  }
  h4 {
    font-family: RalewaySemiBold, Arial, sans-serif;
    font-size: 12px !important;
    line-height: 24px;
    color: $uiTypographyColor;
  }
  /*  Select
  -------------------------------- */
  select {
    font-family: RalewaySemiBold, Arial, sans-serif;
    font-size: 14px !important;
    line-height: 22px;
    color: $uiTypographyColor;
  }
  
  html,
  body {
    font-family: RalewayRegular, Arial, sans-serif;
    //font-size: 13px;
    height: 100%;
    width: 100%;
  }

, и вот как я пытаюсь добавить новый шрифт 

<style lang='scss'>
@import './assets/scss/_variables.scss';

#app {
  font-family: $mainFont;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: $quinaryColor;
  margin-top: 60px;
}
</style>

ссылка на таблицу стилей работает нормально с цветовой палитрой, но он не распознает шрифты, и консоль выдает следующую ошибку: «Эти относительные модули не найдены:

  • .. / fonts / Raleway-MediumItali c .ttf in ./n ........ "относится к импортированным шрифтам в папке новых шрифтов, как вы можете видеть в структуре проекта

структура проекта

Если кто может заставить меня увидеть, что я делаю не так. Все примеры, которые я вижу, относятся к файлу webpack.config, но я не создавал проект с помощью webpack, и я не знаю, нужно ли это для того, что я хочу делать. приветствие и спасибо за вашу помощь и время

...