找不到模块：错误：无法解析＆＃39; ../ fonts / fontawesome-webfont.eot＆＃39;

Question

我正在使用Webpack 4并在font-awesome": "^4.7.0"中安装了＆＃34; 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

在导入之前指定字体位置：

Observable<Paper>

Answer 2

更改

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

例如（字体惊人5）：

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

在app.scss中

Answer 3

我认为您必须在没有尾随.scss或.css的情况下导入它。因此，请尝试以下

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

Answer 4

我通过以下步骤使它起作用：

创建包含内容的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，因此您的路径可能有所不同）