在Webpack中结合CSS Modules使用Semantic UI时遇字体文件解析错误

我之前也碰到过一模一样的问题！Eject之后Create React App的默认Webpack配置确实没包含字体文件的处理规则，导致Semantic UI CSS里引用的图标字体找不到。别担心，按下面的步骤改配置就能搞定：

步骤1：安装必要的加载器（如果没装的话） #

首先确保你有处理字体文件的工具，旧版Webpack用file-loader，新版Webpack 5可以直接用内置的资源模块。如果用file-loader的话，先安装：

yarn add file-loader --dev
# 或者用npm
npm install file-loader --save-dev

步骤2：修改Webpack配置文件 #

打开 eject 后生成的config/webpack.config.js文件：

1. 找到module.rules数组，这是所有资源处理规则的集合。
2. 在处理图片/媒体文件的规则（一般是匹配/\.(png|jpe?g|gif|svg)$/的那项）后面，添加处理字体文件的规则：

针对Webpack 4或更早版本（使用file-loader）：

{
  test: /\.(eot|woff|woff2|ttf|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/', // 把字体文件输出到build/fonts目录
        publicPath: '../fonts/' // 调整CSS里的引用路径，匹配输出目录
      }
    }
  ]
}

针对Webpack 5版本（使用内置资源模块）：

{
  test: /\.(eot|woff|woff2|ttf|svg)$/,
  type: 'asset/resource',
  generator: {
    filename: 'fonts/[name].[ext]' // 直接指定字体文件的输出目录
  }
}

步骤3：重启开发服务器 #

改完配置后，关掉当前运行的yarn start进程，重新启动项目：

yarn start

这样Semantic UI的图标字体就能被正确加载，那个"Module not found"的错误应该就消失了！

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