Невозможно импортировать font-face с помощью загрузчика файлов webpack-4 - PullRequest
Новая
       8

Невозможно импортировать font-face с помощью загрузчика файлов webpack-4

1 голос
/ 17 марта 2020

Я пытаюсь импортировать семейство шрифтов в свое приложение реакции с помощью веб-пакета file-loader, и я получаю эту ошибку:

Модуль не найден: Ошибка: невозможно разрешить './ fonts / gilroy-bold / Gilroy-Bold.woff2 '

Я пробовал с url-loader, но это то же самое.

Вот моя файловая структура: 

src
├── assets
│   ├── fonts
│   │   └── gilroy-bold
│   │       ├── Gilroy-Bold.woff
│   │       └── Gilroy-Bold.woff2
│   ├── scss
│   │     └── 00_settings
│   │         └── _settings.fonts.scss

Код веб-пакета: 

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    loader: 'file-loader',
    options: {
      outputPath: 'dist/fonts' 
    }
}

CSS: 

@font-face {
  font-family: "Gilroy-Bold";
  src: url("./fonts/gilroy-bold/Gilroy-Bold.woff2"),
       url("./fonts/gilroy-bold/Gilroy-Bold.woff");
}

$font-family-accent: 'Gilroy-Bold';

Я пытался следовать эта статья: https://survivejs.com/webpack/loading/fonts/ и много других статей ...

1 Ответ

1 голос
/ 17 марта 2020

РЕШИТЬ! Проблема была в пути шрифта CSS, что странно с точки зрения структуры файла ... 

@font-face {
  font-family: "Gilroy-Bold";
  src: url("../fonts/gilroy-bold/Gilroy-Bold.woff2"),
       url("../fonts/gilroy-bold/Gilroy-Bold.woff");
}

Я пробовал оба url(./) и url(../../), но ни один из них не работает ...

...