1

对 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

src为 SCSS创建了一个目录，main.scss并创建了一个部分目录来引入排版：

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

主要.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 包失败

根据研究，我没有看到答案，我读过：

盖茨比-config.js：

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

为什么在尝试为此站点引入本地字体时出现错误？另外，我引入了本地字体，因为我在文档中阅读了离线功能。

编辑：

使用 Hello World Starter 分叉 Gatsby：

编辑隐形背景

4

1 回答 1

0

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

注意提示的错误：

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

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

编辑隐形背景

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

于 2021-01-11T05:55:20.480 回答