在 Nextjs 中从 node_modules 加载字体答案

【问题标题】：Loading font from node_modules in Nextjs在 Nextjs 中从 node_modules 加载字体
【发布时间】：2021-07-02 07:36:43
【问题描述】：

我正在安装一个使用如下字体的 npm 包：

var _font = _interopRequireDefault(require("../../style/fonts/font123.eot"));

当我启动我的 nextjs 项目时，它返回给我这个错误：

Error before webpack loader

为了解决这个问题，我在 next.config.js 上放置了一个 webpack 加载器：

config.module.rules.push({
  test: /\.(woff|woff2|ttf|eot|svg)$/,
  loader: 'file-loader',
  options: {
    name: 'fonts/[name].[ext]'
  }
});

但它无法解析所有字体，而不仅仅是 .eot 文件。

error after adding webpack loader

我已经尝试了许多 webpack 加载器，但似乎没有任何效果

【问题讨论】：

我也遇到过同样的问题。我通常为此使用包“next-fonts”，但它最近开始失败。如果我找到解决办法，我会告诉你的
@b1nd 我正在使用 next-transpile-modules。它解决了我的错误，但使应用程序的开发速度太慢。

标签： reactjs webpack node-modules

【解决方案1】：

我遇到了同样的问题，用这个配置解决了。

module.exports = {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(woff|woff2|ttf|eot|svg)$/,
      loader: "file-loader",
      options: {
        esModule: false,
        name: "[name].[ext]",
        outputPath: "static/media/fonts/",
        publicPath: "../assets/fonts/",
      },
    });

    return config;
  },
};

Here 是一篇可以帮助你更多的文章。

【讨论】：