Css Sass未使用webpack加载正确的背景SVG图像

我在

webpack.config.js

rules: [
    {
        test: /\.svg$/,
        use: ['svgr/webpack', 'url-loader']
    },
    {
        test: /\.scss$/,
        use: [
            'style-loader',
            'css-loader',
            'resolve-url-loader',
            'sass-loader'
        ]
    },
    {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            plugins: ['transform-class-properties', 'transform-object-rest-spread'],
            presets: ['es2015', 'react']
        }
    }
]

正如您所看到的，我使用一个插件将SVG图像转换为React组件，效果很好

当我想在

.scss

文件中将SVG图像用作背景CSS属性时，就会出现问题

.scss

带有选择器外观的文件：

.some-name-class {
  background-image: url('../images/example.svg');
}

当我使用Chrome开发工具检查元素时，会生成以下输出：

---

这里的问题是，svgr/webpack在遇到.svg文件时会尝试返回React对象。你发现的结果也是一样的。在输出css文件中有一个对象。要解决此问题，您可以使用不同的发卡机构。例如：

{
    test: /\.svg$/,
    issuer: /\.(js)x?$/,
    use: ['svgr/webpack']
},
{
   test: /\.svg$/,
    issuer: /\.css$/,
    use: ['svg-url-loader']
}