Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot'

Question

I am using Webpack 4 and installed "font-awesome": "^4.7.0" in package.json. Then I tried to import it into my index.scss as following:

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

And I've got the following error message:

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

As you can see, bootstrap works fine, but font-awesome not.
The folder of downloaded font-awesome looks as following:

Do I miss some configuration?

Update Import the css file like:

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

but import scss file like:

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

does not work why?

Answer 1

Specify the font location before import :

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

Answer 2

I made it work with these steps:

create src/_variables.scss with content:

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

So I set the complete path beginning ../node_modules

and for completeness my src/styles.scss:

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

(I'm using package font-awesome-sass so your path(s) may differ)

Answer 3

change it

$fa-font-path: "./webfonts";

for exemple (fontawesome 5):

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

in app.scss