Webpack 5未打包CSS url()引用的字体资源模块问题咨询

问题根因 #

从报错日志可以看出，webpack 是从 src/styles 目录出发，按照你写的 ../../assets/fonts/Lato-Regular.woff2 向上跳转两级，最终查找的是项目根目录下的 assets/fonts/Lato-Regular.woff2，和你实际存放字体的路径不匹配，才会触发找不到文件的错误。tsx文件引入图片正常是因为JS模块的路径解析逻辑和SCSS中相对路径的解析逻辑独立，不受SCSS文件位置影响。

可直接落地的修复方案 #

• 方案1：修正相对路径（最快生效） #

  如果你把字体文件存放在项目src目录下的assets/fonts里（即完整路径为G:\src\com\Web\app\src\assets\fonts\Lato-Regular.woff2），只需要把@font-face里的路径修改为：

  src: url("../assets/fonts/Lato-Regular.woff2") format("woff2");
  

  相比原来的路径只需要向上跳转1级，就能定位到src目录下的assets文件夹。

• 方案2：配置别名避免层级混乱（推荐长期使用） #

  首先在 webpack.config.js 中新增 resolve.alias 配置：

  module.exports = {
    // 原有配置不变，新增以下内容
    resolve: {
      alias: {
        '@assets': path.resolve(__dirname, 'src/assets'),
      },
      extensions: ['.tsx', '.ts', '.js'],
    }
  }
  

  之后在SCSS中引用资源时，统一通过别名引入，不需要再手动计算相对路径层级：

  src: url("~@assets/fonts/Lato-Regular.woff2") format("woff2");
  

  路径前的~是告诉css-loader该路径需要走webpack的模块别名解析规则。

• 补充优化项 #

  检查你的字体资源匹配规则，补充忽略大小写的修饰符i，避免因为后缀大小写不一致导致匹配失败：

  {
    test: /\.(woff|woff2|eot|ttf)$/i,
    type: "asset/resource",
  }
  

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