Не могу загрузить удивительный шрифт с Webpack [дубликат]

На этот вопрос уже есть ответ здесь:

Как настроить веб-пакет для загрузки значков глифов / шрифтов в React 1 ответ

Попытка загрузить font-awesome с webpack дает мне эту ошибку:

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3
Module parse failed: ...\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

Я пытаюсь импортировать font-awesome в компонент React, например так:

import "font-awesome/scss/font-awesome.scss";

Вот как выглядит мой webpack.config.js. Я хотел загружать font-awesome и связанные ресурсы отдельно от всего остального, а именно потому, что я уже загружаю SVG с babel, но не хотел делать это с font-awesome.

{
    test: /\.scss/,
    loader: ExtractPlugin.extract("style", "css!sass")
},
{
    test: /\.svg$/,
    loader: "babel!svg-react",
    exclude: /node_modules/
},
{
    test: /\.ttf$/,
    loader: "file-loader?mimetype=application/octet-stream&name=[name].[ext]",
    exclude: /node_modules/
},
{
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/font-woff&name=[name].[ext]",
    exclude: /node_modules/
},
{
    test: /\.(otf|eot|png|svg|ttf|woff|woff2)(\?[\s\S]+)?$/,
    loader: "url?limit=10000",
    include: "node_modules/font-awesome/fonts"
}

Я тоже пытался сделать регулярное выражение, и это не сработало:

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000" }

Ответы на вопрос(3)

.eot файлы сfile-loader вместоurl-loader.

пример:

module: {
    loaders: [
        {
            test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
            loaders: ['file']
        }
    ]
}
 Thaddeus Albers11 апр. 2019 г., 08:07
 crx430 сент. 2017 г., 08:54
Не могли бы вы объяснить, почему мы должны использоватьfile-loader вместоurl-loader?

  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },

и наверняка нужно импортировать ненужные файлы в ваш основной файл

  import 'font-awesome/css/font-awesome.css';

также не забудьте установить загрузчик

  npm install url-loader --save-dev
 The Guy with The Hat20 нояб. 2017 г., 20:48
Разве вы не можете просто сделать это в одной строке с(ttf|eot|svg|woff2?)?
Решение Вопроса

настроить загрузчики в вашем webpack.config.js для использования url-loader и file-loader. Пример:

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls. 
      // the file-loader emits files. 
      { 
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        loader: "url-loader?limit=10000&mimetype=application/font-woff" 
      },
      { 
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        loader: "file-loader" 
      },
    ]
  }
};

чтобы сделать это, вам нужно npm установить font-awesome-sass-loadernpm i font-awesome-sass-loader Вам также понадобится url-загрузчикnpm i url-loader и файл-загрузчикnpm i file-loader

Ваш ответ на вопрос