React安装cdbreact后Webpack无法解析fontawesome字体文件报错如何解决？

DevOps 小满

2026-9-28

问题原因

报错是Webpack没有配置对应loader处理字体文件（.eot、.woff、.woff2、.ttf等二进制格式）导致，cdbreact依赖FontAwesome图标库的字体资源，编译时无法解析这类资源就会抛出该错误。

解决方法

场景1：使用create-react-app（CRA）创建的未eject项目

CRA默认已内置字体文件解析能力，报错优先检查两个点：

先补全Sidebar.js顶部缺失的导入语句：

import { CDBSidebar, CDBSidebarContent, CDBSidebarFooter, CDBSidebarHeader, CDBSidebarMenu, CDBSidebarMenuItem } from 'cdbreact';
import { NavLink } from 'react-router-dom';

如果导入正常仍报错，删除项目根目录的node_modules文件夹和yarn.lock文件，重新执行yarn install安装依赖即可。

场景2：手动配置Webpack的项目

需要在Webpack配置中新增字体文件处理规则：

安装依赖：yarn add file-loader -D
打开webpack.config.js配置文件，在module.rules数组中新增以下规则：

// webpack 5 版本配置
{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: 'asset/resource'
}

// webpack 4及更低版本配置，替换上面的配置即可
// {
//   test: /\.(woff|woff2|eot|ttf|otf)$/i,
//   use: ['file-loader']
// }