React 找不到模块 - ttf、otf 字体答案

【问题标题】：React Cannot find module - ttf, otf fontsReact 找不到模块 - ttf、otf 字体
【发布时间】：2019-07-22 05:20:04
【问题描述】：

我正在尝试像下面的代码一样加载本地字体，但我不断收到Cannot find module '@/landing/fonts/Gotham-Bold.ttf' 错误并且不知道这条路径到底出了什么问题。

我的文件夹结构是这样的，我正在处理的代码是LandingPage.tsx

import { createGlobalStyle } from 'styled-components';
import font from './fonts/Gotham-Bold.ttf'

const Gotham = createGlobalStyle`
  @font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: bold;
    src:
      url(${font}) format('truetype'),
  }
`

【问题讨论】：

你成功了吗？
这对我有用。像这样导入... src: url('../assets/fonts/gilroy/gilroy.woff2') format('woff2');

标签： javascript css reactjs fonts styled-components

【解决方案1】：

知道这有点旧，但它可能是 Typescript 的问题。在 Typescript 中使用字体文件时，您必须将格式声明为模块。

为此，您可以创建一个fonts.d.ts 文件并在其中添加以下代码：

declare module '*.ttf';

这样 Typescript 将知道如何处理 .ttf 文件。您还需要一个合适的Webpack loader。

【讨论】：

【解决方案2】：

根据您的文件夹结构，LandingPages.tsx 位于 pages 文件夹内。 pages 文件夹是 fonts 文件夹的同级文件夹。您需要从 pages 文件夹内遍历到 fonts 文件夹。

正确的路径是'.././fonts/Gotham-Bold.ttf'

您需要向上移动一级 (..)，然后转到字体文件夹。

如果这能解决您的问题，请告诉我。

【讨论】：

这不起作用。并且 react 会显示错误 'Cannot find module'