IT技术 - 无法使用 TypeScript 导入本地字体 - 吾爱随笔录

无法使用 TypeScript 导入本地字体

IT技术 reactjs typescript webpack

2021-05-17 11:27:45

我正在尝试使用 TypeScript 项目在 React 上导入字体文件，但它不会将其识别为字体文件，而是将其视为module

文件夹结构：

在我的 index.tsx 文件中，我导入了我需要的字体，并导出了 Font 常量：

import helveticaNeueLightWoff from './HelveticaNeueW02-45Ligh.woff';
import helveticaNeueLightWoff2 from './HelveticaNeueW02-45Ligh.woff2';
import helveticaNeueMediumWoff from './HelveticaNeueW02-67MdCn.woff';
import helveticaNeueMediumWoff2 from './HelveticaNeueW02-67MdCn.woff2';
import helveticaNeueBoldWoff from './HelveticaNeueW02-75Bold.woff';
import helveticaNeueBoldWoff2 from './HelveticaNeueW02-75Bold.woff2';
import helveticaNeueBoldCnWoff from './HelveticaNeueW02-77BdCn.woff';
import helveticaNeueBoldCnWoff2 from './HelveticaNeueW02-77BdCn.woff2';

const Fonts = {
  helveticaNeueLightWoff,
  helveticaNeueLightWoff2,
  helveticaNeueMediumWoff,
  helveticaNeueMediumWoff2,
  helveticaNeueBoldWoff,
  helveticaNeueBoldWoff2,
  helveticaNeueBoldCnWoff,
  helveticaNeueBoldCnWoff2,
};

export default Fonts;

我使用 url-loader（我也尝试过使用 file-loader）。这是我的 webpack.config.ts

{
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
          use: {
            loader: 'url-loader',
            options: {
              // Limit at 50k. Above that it emits separate files
              limit: 50000,
              // url-loader sets mimetype if it's passed.
              // Without this it derives it from the file extension
              mimetype: 'application/font-woff',
              // Output below fonts directory
              name: './fonts/[name].[ext]',
            },
          },
        },

这是我得到的错误： Cannot find module './HelveticaNeueW02-45Ligh.woff'

这个问题的原因可能是什么？

2个回答

您需要将字体文件格式声明为module，以便 TypeScript 可以正确解析它们。

创建一个fonts.d.ts文件并将以下内容添加到其中

declare module '*.woff';
declare module '*.woff2';

它告诉 TypeScript 字体文件类型是有效的导入module。

“d.ts”文件格式用于提供有关用 JavaScript 编写的 API 或第三方导入的形状的typescript类型信息。

确保include在tsconfig.json. 一个不错的方法是typings在您的项目中有一个根目录，然后typings/**/*.d.ts在include.

为遇到类似问题的 expo 用户完成上一个答案：我遇到了同样的问题，声明module足以导入字体但不能实际加载这些字体。我正在使用expo-font，Typescript 抱怨结果的类型。为了使其工作，我创建了具有以下内容的相同文件：

declare module "*.ttf" {
  const value: import("expo-font").FontSource;
  export default value;
}

这表明导入的module将具有FontSource来自expo-font库的类型。然后我就可以加载我的字体了:)

其它你可能感兴趣的问题

上一篇如何在 React 中获取文本框的值？下一篇redux 存储的最大内存大小是多少？