多SCSS文件拆分时Webpack无法定位字体资源的问题排查

问题分析 #

你遇到的情况是：main.scss中直接引用字体资源一切正常，但将字体引用拆分到styles/globals/_typography.scss后，使用../../assets/FuturaCyrillicExtraBold.ttf路径会触发"Module not found"错误，而同目录下的图片资源却能正常加载。核心原因是Webpack解析SCSS内的资源引用时，会以当前SCSS文件的物理位置为基准查找资源，若没有配置合适的路径解析规则，就会出现路径层级错配的问题。

解决方案 #

方案1：配置Webpack路径别名（推荐） #

通过别名统一资源路径，彻底避免相对路径的层级困扰：

1. 在webpack.config.js中添加别名配置：

const path = require('path');

module.exports = {
  // 其他配置...
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, 'src/assets')
    }
  },
  // module规则保持原有配置...
};

2. 在_typography.scss中用别名引用字体：

@font-face {
  src: url('@assets/FuturaCyrillicExtraBold.ttf');
  font-family: 'FuturaCyrillicExtraBold';
}

方案2：用resolve-url-loader修正相对路径 #

当SCSS文件被导入合并时，resolve-url-loader会自动修正资源的相对路径，需要配合sass-loader的sourceMap功能使用：

1. 安装依赖：

npm install resolve-url-loader --save-dev

2. 修改Webpack中SCSS的处理规则：

module.exports = {
  module: {
    rules: [
      // 原有字体资源规则不变
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      },
      // 更新SCSS处理规则
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true // 必须开启，resolve-url-loader依赖此特性
            }
          },
          'resolve-url-loader'
        ]
      }
    ]
  }
};

3. 保持_typography.scss中的相对路径即可：

@font-face {
  src: url('../../assets/FuturaCyrillicExtraBold.ttf');
  font-family: 'FuturaCyrillicExtraBold';
}

方案3：检查路径与文件名细节 #

确认字体文件名、路径的拼写完全正确，注意Linux/Mac系统对文件名大小写敏感——如果你的开发环境是Windows，部署到Linux服务器时可能因大小写不匹配出错，务必保持文件名和引用路径的大小写一致。

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