找不到模块:错误:无法解析'../fonts/fontawesome-webfont.eot'

Question

我正在使用Webpack 4并安装" font-awesome": "^4.7.0"in 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文件夹如下所示:

我想念一些配置吗？

更新 导入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

我认为您必须导入它而不带尾随 .scss 或 .css。所以尝试以下方法

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