Html 如何正确导入字体库

我正试图通过scss在webpack 4中使用字体awesome中的图标。
webconfig文件如下所示：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const autoprefixer = require("autoprefixer");

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "style.css"
            }
          },
          { loader: "extract-loader" },
          {
            loader: "css-loader"
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [autoprefixer({ grid: false })]
            }
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: ["./node_modules"]
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name][hash].[ext]",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new CopyWebpackPlugin([
      {
        from: "public"
      }
    ])
  ]
};

我导入了SCS，如下所示：

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

和使用：

    <a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item" href="#">
        <i class="fas fa-inbox mdc-list-item__graphic"></i>Inbox
    </a>  

它表明：

一个矩形而不是一个图标。我做错了什么？

---

完整的示例已打开。

我遇到了同样的问题，将字体awesome scs导入到我的项目中，这对我来说是有效的

@import "~@fortawesome/fontawesome-free/scss/fontawesome"; 

---

对于任何其他遇到字体未加载问题的人（例如，显示空的方形标志符号），尽管Webpack（4）编译并文件加载程序正确复制字体，我发现了一个选项，可以按预期加载所有内容

首先，推荐的SCS导入带有

~

节点\u模块路径，如其他帖子所示：

$fa-font-path: '~@fortawesome/fontawesome-pro/webfonts';
@import '~@fortawesome/fontawesome-pro/scss/fontawesome';
@import '~@fortawesome/fontawesome-pro/scss/light';

然后您将有文件加载器配置字体文件（如上）。要在文件加载程序选项中添加

esModule:false

。请注意，这可能会干扰您在SCS之外导入的其他字体

---

基本上我发现字体会被复制，但是编译的CSS中的字体文件url会显示为

src:url（[object Module]）。默认情况下，为了方便起见，文件加载器会将导入的文件转换为一个模块，但这里的字体当然不需要这样做，因此添加上面的选项可以解决这一问题。
要获得Laravel项目的font awesome，下一个对我有用：

首先，我在public/css中搜索了“fa-fw”。我保证它不在
npm安装--save@fortawesome/fontawesome free
——下载并创建文件到node_模块
添加到
resources/sass/app.scss
添加到
资源/sass/_变量.scss
（对此不确定）
建造<代码>npm运行开发人员

fa现在在你的app.css中。享受吧

---

您可能需要调整Font Awesome

\u variables.scss

（您希望在Font Awesome导入之前将其复制到项目文件并导入）中使用的路径，还需要验证字体文件是否正确复制到输出目录。有关更多详细信息，请参阅Font Awesome文档以用于Sass：

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/solid';

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