Sass没有使用webpack加载正确的背景SVG图像

Question

我在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']
        }
    }
]

正如您所看到的，我使用svgr插件将SVG图像转换为React组件，并且工作正常。

当我想在.scss文件中使用SVG图像作为背景CSS属性时出现麻烦。

带选择器的

.scss文件：

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

当我通过Chrome开发工具检查元素时生成以下输出：

Answer 1

这里的问题是，svgr / webpack在遇到.svg文件时会尝试返回React对象。和您发现的输出相同。在输出css文件中有一个对象。要解决此问题，您可以使用其他发行人。例如：

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