小编Wil*_*ner的帖子

我正在尝试在我的 React 应用程序中包含一个新的字体。这是使用 Webpack 构建的。

我遵循了字体捆绑的 webpack 文档，https://webpack.js.org/guides/asset-management/#loading-fonts。由于某种原因，这没有找到我包含的字体文件。

我在制作新字体时指定了字体文件源：

@font-face {
  font-family: "Lato Regular";

  src: url("../../assets/fonts/Lato-Regular.woff2") format("woff2");

  font-style: normal;
}

然后我将这个新字体包含在我的样式中，如下所示

.button {
   font-family: "Lato Regular";
}

然而，webpack 编译器在尝试编译时会产生错误：

ERROR in ./src/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/index.scss) 21:37-102
Module not found: Error: Can't resolve '../../assets/fonts/Lato-Regular.woff2' in 'G:\src\com\Web\app\src\styles'
resolve '../../assets/fonts/Lato-Regular.woff2' in 'G:\src\com\Web\app\src\styles'
  using description file: G:\src\com\Web\app\package.json (relative path: ./src/styles)
    using description file: G:\src\com\Web\app\package.json (relative path: ./assets/fonts/Lato-Regular.woff2)
      no extension
        G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2 doesn't exist
      .ts
        G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2.ts doesn't exist
      .tsx
        G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2.tsx doesn't exist
      .js
        G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2.js doesn't exist …