Как загрузить файл шрифта в vuejs и webpack? - PullRequest
Новая
       7

Как загрузить файл шрифта в vuejs и webpack?

0 голосов
/ 15 октября 2018

Я много читал, но ни одна из ссылок не показывает, как именно добавить шрифты в vuejs.Вот как я импортирую шрифт в мой файл less. 

@font-face {
  font-family: "Questrial";
  src: url("../../fonts/Questrial-Regular.ttf");
}

@font-face {
  font-family: "Galano_Grotesque_extra_Bold";
  src: url("../../fonts/Galano_Grotesque_Bold.otf");
}

@font-face {
  font-family: "Galano_Grotesque_Bold";
  src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf");
}

Это ошибка, которую я получаю

ОШИБКА в ./src/themes/jatango-theme/components/fonts/Galano_Grotesque_Bold.otf 1: 4 Ошибка разбора модуля: неожиданный символ '' (1: 4) Вам может потребоваться соответствующий загрузчик для обработки этого типа файла.(Исходный код опущен для этого двоичного файла)

Я новичок в VUEJS без каких-либо предварительных знаний о реакции или угловых.Я знаю только jquery и javascript.Поэтому, пожалуйста, кто-нибудь даст мне пошаговое руководство, чтобы включить шрифты.Заранее спасибо:)

folder-structure

Folder-structure

Ответы [ 3 ]

0 голосов
/ 15 октября 2018

Надеюсь, что это поможет другим, кто сталкивается с той же проблемой.По какой-то причине Vue.js выдает ошибку при использовании .otf файлов.Я использовал .woff и теперь все работает нормально.Используйте следующий код в вашем webpack.config.js файле: 

      module.exports = function (config, { isClient, isDev }) {
            module: { rules: [ { test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/, 
            loader: 'file-loader' } ] }
            return config }

и импортируйте файлы в свой файл css, используя что-то вроде этого 

 @font-face { 
       font-family: "Questrial";
       src: url("../../fonts/Questrial-Regular.ttf"); 
   }
0 голосов
/ 11 июня 2019

Поместите ваши шрифты в папку public/fonts/.В css или scss укажите путь, начинающийся с /fonts/.

Пример scss: 

$font-dir: "/fonts/";

@font-face {
  font-family: "NameFont";
  src: url("#{$font-dir}NameFontRegular/NameFontRegular.eot");
  src: url("#{$font-dir}NameFontRegular/NameFontRegular.eot?#iefix")format("embedded-opentype"),
  url("#{$font-dir}NameFontRegular/NameFontRegular.woff") format("woff"),
  url("#{$font-dir}NameFontRegular/NameFontRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

Далее импортируйте ваш scss в main.js

Пример: 

// eslint-disable-next-line
import styles from './assets/scss/main.scss';

или vue.config.js

Пример: 

module.exports = {
...
  css: {
    modules: true,
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      },
      sass: {
        data: '@import "~@/assets/scss/import/_variables.scss"; @import "~@/assets/scss/import/_mixins.scss";'
      },
    },
  },
...
}
0 голосов
/ 15 октября 2018

Это ошибка веб-пакета.Вам не хватает webpack loader для управления файлами шрифтов.Обычно я использую file-loader для шрифтов: 

{
  test: /\.(ttf|otf|eot|woff|woff2)$/,
  use: {
    loader: "file-loader",
    options: {
      name: "fonts/[name].[ext]",
    },
  },
}

Добавьте этот код в ваш файл конфигурации webpack (модуль> раздел правил) или если вы используетеvue-cli 3, в вашем файле vue.config.js (раздел configurewebpack).

...