无法在创建React App项目中加载自定义字体

Question

我有一个create-react-app项目，使用绝对导入和CSS模块（scss）。我正在尝试定义自定义字体，但是导入没有得到解决。

尝试了文档中建议的所有内容。

我的文件夹结构

jsconfig.json
public
src
L assets
 L fonts
  L impact.ttf
L index.js
L index.scss

在我的index.scss

中

@font-face {
  font-family: 'impact';
  src: url(./assets/fonts/impact.ttf) format('ttf');
}

我的jsconfig.json（用于绝对导入）

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

我的index.js导入import './index.scss'在文件顶部。 当我尝试编译此代码时，我的组件抛出一个错误，提示字体文件无法解析...

Module not found: Can't resolve './assets/fonts/brush.ttf' in '/Users/xxx/project/src/containers/mycomponent'

还使用node-sass，因此scss文件可以工作。 不能把这个弄清楚...

Answer 1

在create-react-app中，资产（图像，字体和文件...）的默认文件夹为public文件夹。

因此，无需创建./src/assets文件夹，只需将'fonts'文件夹移动到'/ public'（./public/fonts）

有关更多信息，请检查： https://create-react-app.dev/docs/adding-images-fonts-and-files/

Answer 2

解决了这个问题...

将字体放在公用文件夹中，然后像这样在您的scss中引用它们

@font-face {
  font-family: 'impact';
  src: url('%PUBLIC_URL%/fonts/impact.ttf') format('ttf');
}