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

DᴀʀᴛʜVᴀᴅᴇʀ

从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 StarterCode Sandbox(我会将其添加为按钮,但我不知道语法)

费兰·比雷(Ferran Buireu)

思维方式和您的方法是完全有效的,问题取决于您路径中路径的相对性_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/部分,您似乎在某处进行了硬编码也看一看。

在这里您可以使用沙箱:https : //codesandbox.io/s/goofy-chatterjee-blx42? file =/ src/ styles/ partials/_typography.scss: 143-207

问题取决于您的路径,该路径是相对于main.scss文件的,而不是相对于部分的路径,因为最后,main.scss因为您直接导入文件,所以该部分属于文件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何导入字体?

如何在非本地包中本地导入错误

如何将具有现有文件的本地项目导入到“源代码树”

SCSS:如何在SCSS文件中导入Google字体?

在Gatsby网站中修改路由

Angular 6从具有资产的node_modules导入SCSS

具有不同粗细但名称相同的Google本地字体

将本地模块作为具有子组件的组件导入

如何在Gatsby网站中添加bootstrap js

导入嵌套的SCSS模块失败(Gatsby)

使用Powershell导入具有中文域名的网站

在Scss中导入字体变体-React

如何导出全局scss变量文件以导入到Rails 6 webpacker中的所有scss文件

如何在带有样式化组件的Reactjs中导入本地字体?

如何覆盖导入的Scss文件中的样式

当Angular 8中导入了样式表时,如何使用SCSS更改字体颜色?

如何在Gatsby网站的主体中包含带有外部脚本的嵌入代码?

Gatsby-将Google字体添加到Gatsby网站

如何将ttf字体本地文件导入Vuetify变量?

如何将本地字体导入Gatsby网站?

如何简化CSS中的字体导入

如何在具有15万个嵌入式字体的PDF文档中删除重复的字体?

如何从网站捕获字体?

如何使网站具有响应能力?

如何找到具有全部字体粗细的网络字体?

导入具有条件导出的本地模块

如何使用Visual Studio 2013将具有sql本地db数据库的网站发布到Azure

如何在 Gatsby 网站中内联 node_modules 脚本?

如何从具有多个“选择”字段的网站中抓取?