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配置如下：
{
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
},
}]
}
通过移除exclude选项，Webpack将能够正确解析Sass文件中背景图片的路径，从而解决图片地址错误的问题，确保图片能够正常显示在页面上。
