在具有SCSS的Gatsby网站中，如何导入本地字体？

从Noob到Gatsby和SCSS，我想深入学习两者，并在新年伊始学习它们。遵循Gatsby教程之后，我想深入研究并建立一个基于gatsby-starter的网站。

遵循有关SASS的安装和配置的文档。

在src创建的目录中命名fonts并添加Open Sans：

src/fonts/OpenSans-Regular.ttf
src/fonts/OpenSans-Bold.ttf
src/fonts/OpenSans-Italic.ttf

在srcSCSS中main.scss创建了一个名为的目录，并创建了一个部分目录以引入印刷术：

src/styles/main.scss
src/styles/partials/_typography.scss

main.scss：

@import 'partials/typography';

body {
  font-family: $font-primary;
}

_typography.scss：

$font-primary: 'Open Sans', sans-serif;

// Body Font:
@font-face {
  font-family: $font-primary;
  font-style: normal;
  font-weight: normal;
  src: url('../../fonts/OpenSans-Regular.ttf') format('truetype');
}

在index.js中，我毫无问题地引入了SCSS：

import React from 'react'
import '../styles/main.scss'

const Home = () => {
  return <div>Hello world!</div>
}

export default Home

但是在终端中我得到每种字体的字体错误：

无法解析“ / path / to / project / src / styles”中的“ ../../fonts/OpenSans-Regular.ttf”

如果您尝试使用软件包，请确保已安装“ ../../fonts/OpenSans-Regular.ttf”。如果您尝试使用本地文件，请确保路径正确。错误生成开发JavaScript包失败

根据研究，我看不到答案，而且我读过：

• 盖茨比全球战略
• 使用本地字体

gatsby-config.js：

module.exports = {
  plugins: [`gatsby-plugin-sass`],
}

尝试为该网站引入本地字体时，为什么会出现错误？另外，我引入了本地字体，因为我在文档中读到了脱机功能。

编辑：

这是带有分叉的Gatsby Hello World Starter的Code Sandbox。（我会将其添加为按钮，但我不知道语法）