在Webpack中使用超赞的字体

Question

我尝试导入fontawesome.scss，但似乎我做错了方法。所以这是我做的：

1. 所有拳头，我都安装了npm install @fortawesome/fontawesome-free
2. 接下来，我使用file-loader配置了webpack.config.js

{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'fonts/'
    }
  }]
}

1. 试图将所有内容导入我的main.scss文件

   $fa-font-path: "../../node_modules/@fortawesome/fontawesome-free";

   @import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

   @import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";

2. 然后我尝试构建npm run build并收到错误消息：

ERROR in ./src/scss/main.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleNotFoundError: Module not found: Error: Can't resolve '../../node_modules/@fortawesome/fontawesome-free/fa-solid-900.eot' in 'C:\Users\gosto\Documents\project\src\scss'

Answer 1

1. 检查npm模块是否已添加到package.json文件中
2. 已经提到过，在node_modules中查找包，并检查是否在相对路径中有文件。

3. 阅读软件包here

的文档

4. 按照在文档中配置和导入软件包的方式