Vue Cli 3 Локальные шрифты не загружаются

При попытке загрузить пользовательские локальные шрифты в Vue CLI 3 шрифты по-прежнему не отображаются. Я не получаю никаких сообщений об ошибках. Инспектор показывает, что загружается правильное правило, но шрифты возвращаются к serif в #app. Шрифты нигде не отображаются в моей папке dist.

Я попытался добавить загрузчики в vue.config.js, изменить пути URL-адресов и переместить правила @font-face в разные места, изменив общедоступный путь на ' ' и '/', импортировав scss в main.js.

Загрузка шрифта:

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('/assets/fonts/OpenSans-Regular.eot');
    src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
         url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
         url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
         url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

И используйте в App.vue:

<style lang = "scss">
#app {
  font-family: 'OpenSans-Regular', serif;
}
</style>

Этот стиль помещен в мой файл main.scss. Структура файла следующая:

src
  assets
    fonts
      OpenSans-Regular.eot
      OpenSans-Regular.woff
      etc
  styles
    main.scss
  App.vue
vue.config.js

vue.config.js файл выглядит следующим образом:

module.exports = {
  publicPath: '/',
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        data: `@import "@/styles/main.scss";`
      }
    }
  },
  configureWebpack: {
    module: {
      rules: [{
        test: /\.(ttf|otf|eot|woff|woff2)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "fonts/[name].[ext]",
          },
        },
      }]
    }
  }
}

Я также пробовал chainWebpack в vue.config.js безрезультатно:

chainWebpack: config => {
    config
      .module
      .rule("file")
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/,)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 10000,
        name: 'assets/fonts/[name].[ext]'
      })
      .end();
  }

vue.js fonts vue-cli vue-cli-3 webpack-file-loader

29.03.2019 18:04

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

22 806

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

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

Ты пробовал

@font-face {
font-family: 'OpenSans-Regular';
src: url('~@/assets/fonts/OpenSans-Regular.eot');
src: url('~@/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
     url('~@/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
     url('~@/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
     url('~@/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
     url('~@/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}

У меня работает Vue CLI 3, без настроек vue.config.js.

Я загружаю свои стили следующим образом:

import Vue from 'vue';

import router from './router';
import store  from './store';
// eslint-disable-next-line
import styles from './scss/app.scss';

import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

Не уверен, что это хорошая практика.

вау, пытаюсь уже 2 часа, используя методы chainWebpack, а что нет, это работает, абсолютно не понимаю, почему...

— 12.02.2020 20:06

Работает для меня, Спаси мою жизнь

— 08.04.2020 17:02

@Joeri, что вы подразумеваете под этим «// eslint-disable-next-line» Я не могу этого сделать, я получаю сообщение об ошибке «Не удается найти модуль ..»

— 22.04.2020 13:50

@TarasKryvko Если вы не используете Lint, удалите эту строку. Мой линтер (проверка синтаксиса) не любит, когда я импортирую в либу в переменную, которую я не использую в своем коде.

— 22.04.2020 15:09

Да, спасибо :+1: Поскольку я использую scss, @import работает для меня в <style lang = "scss"> в файлах .vue

— 04.06.2020 11:15

Спас меня от головной боли!

— 12.06.2020 12:17

Спасибо, Джоэри, ~@/assets сделали это за меня два

— 16.10.2020 12:56

Если у вас есть lint, вы можете просто импортировать "./scss/app.scss";

— 19.10.2020 16:23

Почему я использую @/assets в файле CSS, не работает, но работает при импорте компонента. В CSS я должен использовать ~@/assets. В чем разница?

— 29.05.2021 10:45

23.04.2019 20:49

Я вставил свой собственный значок-шрифт в теги заголовка моей начальной страницы index.html, которая также имеет собственный импорт шрифта. Та самая страница, на которую вы бы прилепили свой <div id = "vue-app"></div>. Все остальные страницы/компоненты могут использовать для меня семейство шрифтов.

<head> ... <link rel = "stylesheet" href = "icon-font/styles.css" /> </head>

Но если я попробую любое другое место в проекте, это не удастся. и Scss даже не компилируется.

03.06.2019 13:45

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

vue.config.js

module.exports = {
  assetsDir: 'assets/',
  publicPath: '/', // Base directory for dev
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        data: `@import "@/styles/main.scss";`
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule("fonts")
      .test(/\.(ttf|otf|eot|woff|woff2)$/)
      .use("file-loader")
        .loader("file-loader")
        .tap(options => {
          options = {
            // limit: 10000,
            name: '/assets/fonts/[name].[ext]',
          }
          return options
        })
        .end()
  }
};

File-loader не видит файлы, если они не вызываются в js, поэтому я импортировал их в main.js Журнал консоли предназначен для навигации по линтеру, помечая неиспользуемые импорты.

// Fonts need to be called in js for webpack to see and copy over
import OpenSansReg from './assets/fonts/OpenSans-Regular.ttf';
import OpenSansLight from './assets/fonts/OpenSans-Light.ttf';
import OpenSansBold from './assets/fonts/OpenSans-Bold.ttf';


console.info(OpenSansReg, OpenSansBold, OpenSansLight);

затем в одном из моих файлов scss

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/OpenSans-Regular.otf') format('opentype'),
         url('/assets/fonts/OpenSans-Regular.woff') format('woff'),
         url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'),
         url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

06.06.2019 17:13

Что касается меня, я просто убрал эту штуку «format()» и работает... Наконец-то..

20.01.2020 07:22

Мне это помогло
В папку src main.js только что добавил:

import '../src/fonts/fonts.css'

в шрифте следующий код:

@font-face {
    font-family: 'Conv4240';
    src: url('~@/fonts/Conv4240/4240.eot');
    src: local('☺'),
      url('~@/fonts/Conv4240/4240.woff') format('woff'),
      url('~@/fonts/Conv4240/4240.ttf') format('truetype'),
      url('~@/fonts/Conv4240/4240.otf') format('opentype'),
      url('~@/fonts/Conv4240/4240.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

И все начало работать

17.03.2021 14:26