React/SCSS/GatsbyJS - 使用 @font-face 导入时本地字体无法解析

Question

我目前在 Gatsbyjs 项目的两个子组件中收到错误，这些组件导入了我的 global.scss 文件，我在其中尝试加载本地字体，出现此错误：

ERROR in ./src /components/elements/Nav/nav.scss 模块构建失败（来自 ./node_modules/mini-css-ext ract-plugin/dist/loader.js）：ModuleBuildError：模块构建失败（来自./node_modules/css-loader/dist/cjs.js)：错误：无法解析“/Projects/src/components/elements/Nav”中的“../../public/static/fonts/GangsterGroteskRegular.woff2” ' 在 finishWithoutResolve

我尝试使用 gatsby-browser.js 文件更全局地导入 SCSS 文件，但这似乎并没有过滤到子组件。

我已经尝试使用 Webpack 解决此问题并安装 gatsby-plugin-web-font-loader ，因为问题似乎源于此，但到目前为止没有任何效果。

---

我的 global.scss 文件：

@font-face {
    font-family: 'GangsterGrotesk';
    src: local('GangsterGrotesk'),
        url('../../public/static/fonts/GangsterGroteskRegular.woff2')
            format('woff2');
}


$font: 'GangsterGrotesk' sans-serif;
$font-stack: 'GangsterGrotesk' sans-serif, 'Arial' sans-serif,
    'Helvetica' sans-serif;

body {
    margin: 0;
    padding: 0;
    font-family:$font-stack:;
}

---

nav.tsx

import React from 'react';
import { Link, withPrefix } from 'gatsby';
import { siteData } from '../../../config/index';
import './nav.scss';

const Nav = () => {
    const { menu } = siteData.navLinks;

    return (
        <nav>
            <Link className="logo" to="/">
                <h4>{siteData.siteTitle}</h4>
            </Link>
            <ul className="nav__list">
                {menu.map(({ name, url }, key) => {
                    return (
                        <li className="nav__item">
                            <Link className="nav-link" key={key} to={url}>
                                {name}
                            </Link>
                        </li>
                    );
                })}
            </ul>
        </nav>
    );
};

export default Nav;

---

nav.scss

@import '../../../styles/global.scss';

nav {
    padding: 0.25rem 0;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background: $col-bg;
    position: fixed;
    overflow: hidden;
    border-bottom: 1px $col-border solid;
    & > * {
        overflow-x: none;
    }
}

.nav__list {
    align-self: center;
}

.nav__item {
    display: inline-block;
    padding: 0 2rem 0 2rem;
}

---

Answer 1

我不建议指向 /public 文件夹来加载本地字体。该文件夹是在构建过程 (gatsby build) 期间生成的，例如在 gatsbydevelopment 中请求该文件夹时，并不总是可以访问该文件夹。我建议使用源文件夹（在 /src 内）或使用静态文件夹，如 使用本地字体文档。

例如，使用 /src/fonts/GangsterGroteskRegular.woff2 文件夹，方法应该是：

@font-face {
  font-family: "GangsterGrotesk";
  src: url("../fonts/GangsterGroteskRegular.woff2");
}

注意：相应调整 src 规则的本地路径 >

然后，您将能够分配 $font：

$font: 'GangsterGrotesk' sans-serif;

Answer 2

1. 下载字体
2. 在源目录下创建Fonts文件夹

<前><代码>.src/字体

3. 将您要使用的字体（例如 AssistantRegular.ttf）复制到“fonts”目录中。

4. 在项目的index.js中，导入您要使用的字体。

5. 在项目index.css中添加字体

@font-face { font-family: "AssistantRegular";源代码：
本地（“助理常规”），
url("./fonts/assistant.regular.ttf") 格式("truetype");字体粗细：正常； }

.woff -> .woff ->格式（“woff”），
.ttf->格式（“真实类型”）
.eot ->格式（'嵌入式开放类型'）
.svg#vtks_sonhoregular _>格式（'svg'）

6. 现在字体可供项目使用，并且可以在常规 CSS 等中使用

.body{
字体系列：AssistantRegular；
...
}