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

Question

对 Gatsby 和 SCSS 不熟悉，我想在新年伊始深入了解这两个方面。在关注Gatsby tutorial 之后，我想潜入并建立一个基于gatsby-starter 的网站。

遵循install & config for SASS 的文档。

在src 中创建了一个名为fonts 的目录并添加了Open Sans：

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

在 src 中为 SCSS 创建了一个名为 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 包失败

根据研究，我没有看到答案，但我已阅读：

• global scss in Gatsby
• Using Local Fonts

gatsby-config.js：

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

为什么我在尝试为该站点引入本地字体时会出错？另外，我引入本地字体是因为我在文档中看到有离线功能。

---

编辑：

带有 Hello World Starter 的分叉 Gatsby：

Answer 1

您的心态和方法是完全有效的，问题取决于您的_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');
}

注意提示的错误：

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

/path/to/project/src/styles 这很奇怪，由于/path/to/project/ 部分，您似乎在某处进行了硬编码。也来看看吧。

问题取决于您的路径，它与 main.scss 文件相关，而不是部分，因为最终，部分属于 main.scss 文件，因为您直接导入它。