Next.js 13引入含CSS@font路径的npm包时出现模块未找到错误

你遇到的问题是因为Next.js的webpack解析器无法识别CSS中以@leap/core-thin开头的绝对路径，下面提供几种无需修改npm包的解决方案：

方案1：配置Webpack解析别名 #

在项目根目录的next.config.js中添加webpack别名配置，将@leap/core-thin指向包的实际目录，让webpack能正确定位字体文件：

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias['@leap/core-thin'] = path.join(__dirname, 'node_modules', '@leap', 'core-thin');
    return config;
  },
};

module.exports = nextConfig;

配置后，webpack会把CSS中的@leap/core-thin/fonts/fa-solid-900.woff2解析为node_modules/@leap/core-thin/fonts/fa-solid-900.woff2，从而找到正确的文件。

方案2：用PostCSS重写URL路径 #

使用postcss-url插件自动修改CSS中的字体路径，将绝对路径转换为相对路径：

1. 安装依赖：

npm install postcss-url --save-dev

2. 在项目根目录创建postcss.config.js，添加如下配置：

module.exports = {
  plugins: {
    'postcss-url': {
      url: (asset) => {
        // 匹配@leap开头的字体路径，替换为相对于CSS文件的路径
        if (asset.url.startsWith('@leap/core-thin/fonts/')) {
          return './' + asset.url.replace('@leap/core-thin/', '');
        }
        return asset.url;
      },
    },
  },
};

这个插件会在CSS编译阶段，把@leap/core-thin/fonts/fa-solid-900.woff2替换为./fonts/fa-solid-900.woff2，适配Next.js的相对路径解析规则。

方案3：public目录中转（备选） #

如果以上方案不生效，可以手动复制字体文件到项目的public目录，再修改路径指向：

1. 复制node_modules/@leap/core-thin/fonts下的所有文件到项目public/fonts目录
2. 配置postcss-url替换路径：

module.exports = {
  plugins: {
    'postcss-url': {
      url: (asset) => {
        if (asset.url.startsWith('@leap/core-thin/fonts/')) {
          return '/fonts/' + asset.url.split('/').pop();
        }
        return asset.url;
      },
    },
  },
};

这样字体文件会被Next.js当作静态资源处理，路径/fonts/fa-solid-900.woff2可以直接访问。

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