如何通过next.config.js配置加载node_modules中的SVG文件？

问题原因 #

• 配置结构错误：你当前将webpack配置项写在根对象层级，后续展开的withImages/withCSS等插件返回的配置会直接覆盖根层级的webpack配置，你添加的SVG加载规则实际未生效。
• SVG加载规则不匹配场景：仅配置@svgr/webpack仅支持在JS/TS文件中将SVG作为React组件导入，无法处理CSS文件中引用的SVG资源（这类场景需要返回静态资源URL）。

修复方案 #

替换你的next.config.js为以下配置即可：

module.exports = withImages(withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
  },
  webpack: (config, options) => {
    // 先移除默认的SVG处理规则
    config.module.rules = config.module.rules.map(rule => {
      if (rule.test.toString().includes('svg')) {
        return { ...rule, exclude: /\.svg$/i }
      }
      return rule
    })
    // 添加区分场景的SVG规则
    config.module.rules.push({
      test: /\.svg$/i,
      // JS/TS文件中导入走@svgr/webpack转成组件
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack']
    }, {
      test: /\.svg$/i,
      // CSS等其他文件中导入走静态资源处理
      issuer: /\.(css|scss|sass|less)$/,
      type: 'asset/resource',
      generator: {
        filename: 'static/svg/[hash][ext][query]'
      }
    })
    return config
  },
  ...withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
        importScripts: true,
      },
    }),
  )
}))

注意事项 #

修改配置后需要重启Next.js开发服务，清除缓存后即可正常引入jsoneditor的样式文件。

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