React项目中Sass背景图片路径问题及Webpack解决方案

在使用Webpack打包React项目时，如果Sass样式表中的背景图片路径不正确，可能会导致图片无法正常显示。 一个常见的问题是url-loader的exclude选项错误配置。

问题：当url-loader的exclude选项设置为resolve('node_modules')时，Sass样式表中位于node_modules目录外的背景图片将无法被正确处理。

解决方案：

移除url-loader配置中的exclude: resolve('node_modules')选项。 这将允许url-loader处理所有图片，包括Sass样式表中的背景图片。

修改后的Webpack配置如下：

<code class="javascript">{
  test: /\.(svg|png|jpe?g|gif)(\?.*)?$/i,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 1024 * 30,
      fallback: 'file-loader',
      name: utils.assetsPath('imgs/[name].[hash:7].[ext]'),
      esModule: false
    },
  }]
}</code>

通过移除exclude选项，Webpack将能够正确解析Sass文件中背景图片的路径，从而解决图片地址错误的问题，确保图片能够正常显示在页面上。