WebPack не обслуживает шрифты

Question

У меня есть этот CSS:

@font-face{
    font-family:IranSans;
    font-style:normal;
    font-weight:bold;
    src:url("/assets/fonts/IranSansWebBold.eot");
    src:url("/assets/fonts/IranSansWebBold.eot?#iefix") format("embedded-opentype"),url("/assets/fonts/IranSansWebBold.woff2") format("woff2"),url("/assets/fonts/IranSansWebBold.woff") format("woff"),url("/assets/fonts/IranSansWebBold.ttf") format("truetype");
}

И у меня есть шрифты в папке assets и внутри папки fonts. Имена правильные.

Однако Webpack не может обслуживать их и возвращает 404. Я не могу понять, почему это так. Что мне здесь не хватает?

Answer 1

Установить загрузчик файлов, используя npm i file-loader -D

---

  {
    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          outputPath: 'fonts/',
          name: '[name][hash].[ext]',
        },
      },
    ],
  },

Тогда в вашем файле CSS

@font-face {
    font-family: 'GothamPro';
    src: url('./fonts/GothamPro.eot?') format('eot'), 
         url('./fonts/GothamPro.otf')  format('opentype'),
         url('./fonts/GothamPro.woff') format('woff'), 
         url('./fonts/GothamPro.ttf')  format('truetype'),
         url('./fonts/GothamPro.svg#GothamPro') format('svg');
}

Загрузчик файлов выведет все файлы шрифтов ur в каталог build / fonts /

U также может использовать url-загрузчик, если вы хотите встроить файлы шрифтов в свой пакет JavaScript