Модуль не найден: Ошибка: не удается разрешить '../fonts/fontawesome-webfont.eot'

Question

Я использую Webpack 4 и установил font-awesome": "^4.7.0" в package.json. Затем я попытался импортировать его в мой index.scss следующим образом:

@import '~font-awesome/scss/font-awesome.scss';
@import '~bootstrap/scss/bootstrap.scss';  

И у меня появилась следующая ошибкасообщение:

ERROR in ./src/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss)
    Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot' in '/Volumes/Develop/react-reason/cockpit/src'
     @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss 7:414-457

    ERROR in ./src/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss)
    Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in '/Volumes/Develop/react-reason/cockpit/src'
     @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss 7:332-383

    ERROR in ./src/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss)
    Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.svg?v=4.7.0' in '/Volumes/Develop/react-reason/cockpit/src'
     @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss 7:806-857

    ERROR in ./src/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss)
    Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.ttf?v=4.7.0' in '/Volumes/Develop/react-reason/cockpit/src'
     @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss 7:711-762

    ERROR in ./src/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss)
    Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff2?v=4.7.0' in '/Volumes/Develop/react-reason/cockpit/src'
     @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss 7:525-578

    ERROR in ./src/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss)
    Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff?v=4.7.0' in '/Volumes/Develop/react-reason/cockpit/src'
     @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/index.scss 7:619-671

Как видите, bootstrap работает нормально, но font-awesome нет.
Папка с загруженным font-awesome выглядит какследующее:

Мне не хватает какой-либо конфигурации?

Обновление Импортировать файл CSS как:

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

но импортировать файл scss вроде:

@import '~font-awesome/scss/font-awesome.scss';

не работает почему?

Answer 1

Укажите местоположение шрифта перед импортом:

$fa-font-path: "~font-awesome/fonts/";
@import "~font-awesome/scss/font-awesome";

Answer 2

Я заставил его работать с этими шагами:

создать src/_variables.scss с содержанием:

$fa-font-path: '../node_modules/font-awesome-sass/assets/fonts/font-awesome/';

Поэтому я установил полный путь начала, ../node_modules

идля полноты моего src/styles.scss:

@import 'variables';
@import "../node_modules/font-awesome-sass/assets/stylesheets/font-awesome";

(я использую пакет font-awesome-sass, поэтому ваши пути могут отличаться)

Answer 3

Я думаю, что вы должны импортировать его без конечных .scss или .css.Поэтому попробуйте следующее

@import '~font-awesome/css/font-awesome';
@import '~font-awesome/scss/font-awesome';