React+TypeScript项目引入ttf字体提示缺少loader如何解决？

问题解答 #

是否需要安装专门的loader #

需要，报错原因就是webpack默认没有配置处理.ttf二进制字体文件的规则，需要根据你使用的webpack版本配置对应处理方案：

1. webpack5版本
   无需额外安装第三方loader，webpack5内置的asset/resource模块原生支持处理.ttf等字体格式，只需在webpack配置文件的module.rules数组中添加如下规则即可：

{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: 'asset/resource',
  // 可自定义输出路径
  generator: {
    filename: 'fonts/[hash][ext][query]'
  }
}

2. webpack4及更低版本
   需要安装file-loader处理字体文件，该loader完全支持.ttf格式：

• 首先安装开发依赖：

npm install file-loader --save-dev

• 再在webpack配置的module.rules中添加规则：

{
  test: /\.(ttf|eot|woff|woff2|otf)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[hash:8].[ext]',
        outputPath: 'assets/fonts/'
      }
    }
  ]
}

额外注意事项 #

如果你是通过create-react-app脚手架创建的项目，默认已经内置了字体文件的处理规则，不需要手动修改配置或安装loader，出现该报错大概率是scss中引入字体的路径写错了，可以将绝对路径改为相对于当前scss文件的相对路径尝试解决，比如：

// 假设当前index.scss在src目录下，修改路径为相对路径
src: url('./assets/Roboto/Roboto-Regular.ttf') format('truetype');

内容的提问来源于stack exchange，提问作者user14899645