Next.js执行next export后CSS文件内图片字体路径错误问题求助

问题本质：next export导出静态文件时，CSS 中以/开头的绝对资源路径不会根据生成文件的目录层级自动转换为相对路径；next dev/next start模式下由服务端托管根路径，绝对路径可正常访问，静态导出后资源路径与实际文件目录不匹配导致报错。

方案1：调整next.config.js配置（优先推荐） #

改动最小，直接适配静态导出的路径规则：

1. 给next-optimized-images开启relativePaths参数，强制生成资源相对路径
2. 新增trailingSlash: true配置，让Next.js导出时每个页面生成独立文件夹+index.html，避免路径层级计算错误
3. 新增images.unoptimized: true配置，关闭Next.js内置图片优化（静态导出场景默认不支持内置优化，会导致路径异常）

修改后的配置示例：

module.exports = withPlugins([
  [optimizedImages, {
    optimizeImages: false,
    // 新增：开启相对路径生成
    relativePaths: true,
  }],
  {
    assetPrefix: isDeployMode ? '.' : '',
    reactStrictMode: true,
    experimental: { esmExternals: true },
    // 新增：导出路径自动补全尾部斜杠
    trailingSlash: true,
    env: {
      CQ_USE_ANALYTICS: JSON.stringify(config.useAnalytics),
      CQ_AMPLITUDE_API_KEY: JSON.stringify(config.amplitudeApiKey),
    },
    images: {
      domains: ["localhost"],
      // 新增：关闭内置图片优化，适配静态导出
      unoptimized: true,
    },
  }
]);

配置修改后重新执行next build && next export即可验证路径是否正常。

方案2：修改Sass资源引入写法 #

如果方案1不生效，调整Sass文件中资源路径的写法，避免使用根路径绝对路径：

• 如果你将图片放在public/images目录，Sass文件路径为src/styles/xxx.scss，可以改为对应相对路径写法，根据你实际目录层级调整../的数量即可：

#cq-landing {
  line-height: 1.5;
  background-color: #fff;
  font-family: 'SF Pro Display';
  font-display: swap;
  background: url(../../public/images/oval_21.webp) top 0 center no-repeat;
  ...
}

• 也可以配置webpack路径别名简化写法，在next.config.js中新增webpack配置：

webpack: (config) => {
  config.resolve.alias['@images'] = path.join(__dirname, 'public/images')
  return config
}

之后Sass中可以直接用别名引入：

background: url(~@images/oval_21.webp) top 0 center no-repeat;

方案3：使用postcss-url自动转换路径 #

如果上述方案都不符合你的场景，可以引入postcss-url插件自动处理所有CSS中的资源路径：

1. 安装依赖：npm install postcss-url --save-dev
2. 项目根目录新增postcss.config.js：

module.exports = {
  plugins: [
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
      },
    ],
    // 新增postcss-url配置，自动转换为相对路径
    [
      'postcss-url',
      {
        url: 'rebase',
      },
    ],
  ],
}

配置完成后重新导出即可自动修正所有CSS内的资源相对路径。

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