使用Laravel Mix时Webpack/NPM无法找到已安装字体依赖求助

我之前也碰到过和你一模一样的问题，折腾了好一阵才搞定，给你几个亲测有效的方案，你挨个试试：

• 检查CSS中字体引用的路径前缀
  很多时候问题出在引用路径没有加~符号，Webpack需要这个符号来识别node_modules里的依赖。比如正确的引用应该是：

  @font-face {
    font-family: 'CustomFont';
    src: url('~your-font-package/fonts/custom-font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  

  如果你之前没加~，Webpack会把路径当成项目本地的相对路径，自然找不到node_modules里的字体文件。

• 手动添加Webpack字体处理规则
  有时候自定义的Webpack配置会覆盖Laravel Mix的默认规则，导致字体文件没被正确处理。你可以在webpack.mix.js里手动添加字体loader配置：

  mix.webpackConfig({
    module: {
      rules: [
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?.*)?$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[hash:8].[ext]',
                outputPath: 'fonts/',
                publicPath: '../fonts/' // 适配CSS文件的输出路径
              }
            }
          ]
        }
      ]
    }
  });
  

  添加完之后记得重启编译命令。

• 清理Webpack和依赖缓存
  缓存是这类问题的常见元凶，先试试清理Laravel Mix的缓存：

  npm run clear
  

  如果没用，手动删除缓存目录和锁文件，重新安装依赖：

  # npm用户
  rm -rf node_modules package-lock.json
  npm install
  
  # yarn用户
  rm -rf node_modules yarn.lock
  yarn install
  

  重新安装完成后再执行npm run dev或者yarn dev。

• 检查Laravel Mix与Webpack版本兼容性
  不同版本的Laravel Mix对Webpack的适配可能有差异，你可以尝试升级Laravel Mix到最新稳定版：

  npm install laravel-mix@latest --save-dev
  

  或者如果是新版本出的问题，也可以降级到之前的稳定版本（比如v6.x的稳定版）。

• 临时排查：直接复制字体到本地目录
  如果以上方法都不行，你可以把node_modules里的字体文件复制到public/fonts目录下，然后在CSS里引用本地路径：

  @font-face {
    font-family: 'CustomFont';
    src: url('/fonts/custom-font.woff2') format('woff2');
  }
  

  如果这样能正常加载，说明是Webpack解析依赖路径的问题，而不是字体文件本身的问题。

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