использовать локальный шрифт в vue-cli 3

Я хочу импортировать локальный шрифт в свой проект vue-cli 3.

Файлы .woff и .woff3 находятся в src / assets / typo, и я включаю их в src / scss / _typo.scss: введите описание изображения здесь

Мой _typo.scss выглядит так:

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Bold.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Medium.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Medium.woff') format('woff');
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Regular.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

И это мой vue.config для глобального использования цветов и шрифта:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_colors.scss";
          @import "@/scss/_typo.scss";
        `
      }
    }
  }
};

Когда я запускаю свой проект, я получаю следующее сообщение об ошибке:

Failed to compile.

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module not found: Error: Can't resolve './@/assets/typo/HKGrotesk-Bold.woff' in '/Users/robin/Documents/Code/2018/iamrobin-portfolio/src'

vue.js vue-cli font-face
person iamrobin.    schedule 18.07.2018    source источник
comment
Вы когда-нибудь догадывались об этом? Я все время искал ответ и не могу заставить его работать. Для меня я использую прямой путь '/assets/typo/font.woff' в моем URL-адресе. Он компилируется, но не отображается в браузере   -  person tettoffensive    schedule 28.03.2019
comment
причина того, что '/assets/typo/...' не работает, заключается в том, что он не может найти файлы. Файлы должны относиться к файлу scss. Webpack заменит правильный актив в зависимости от того, запущен ли он в dev или скомпилирован для сборки.   -  person Daniel    schedule 12.04.2019

Ответы (4)


arrow_upward
4
arrow_downward

Не уверен, помогает ли это на данном этапе, но у меня была такая же проблема, и я решил ее, используя относительные пути (например, ../assets/fonts/myfont.woff), а не корневой шаблон (например, @/assets/fonts/myfont.woff или @~/assets/fonts/myfont.woff).

Надеюсь, это вам поможет!

person Croot    schedule 09.11.2018
comment
Для меня, если я использую относительный путь, например '../assets/font/myfont.woff', я получаю ошибку модуля, не найден. Если я использую просто «/assets/fonts/myfont.woff», он компилируется нормально, но шрифт не отображается в браузере. - person tettoffensive; 28.03.2019

arrow_upward
1
arrow_downward

Попробуйте это ~@/assets/...

@font-face {
  font-family: 'HKGrotesk';
  src:  url('~@/assets/typo/HKGrotesk-Regular.woff2') format('woff2'),
        url('~@/assets/typo/HKGrotesk-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
person JPilson    schedule 13.12.2020

arrow_upward
0
arrow_downward

С vue-cli 3 у вас есть Webpack 4 и загрузчики по умолчанию, работающие на вас, поэтому вам не нужно настраивать какой-либо загрузчик для такой задачи. Единственное, что вам нужно сделать, это создать main.scss файл в папке scss. В этом файле импортируйте ваши _color.scss и _typo.scss. Затем в свой main.js импортируйте основной файл стиля, например import './stylus/main.scss';. С этим все должно быть хорошо. Просто используйте свой шрифт в CSS, например, body {font-family: "HKGrotesk", sans-serif;}. Не забудьте удалить загрузчик css из vue.config, чтобы не мешать работе webpack по умолчанию.

person dalvallana    schedule 31.07.2018

arrow_upward
0
arrow_downward

У меня была такая же проблема, я бы хотел, чтобы на нее ссылались в vue cli github issues :) Исправлено, заставляя себя использовать относительные пути, но это действительно отстой.

person y_nk    schedule 22.05.2019