Sass 无法使用 webpack 加载正确的背景 SVG 图像答案

【问题标题】：Sass not load correct background SVG image using webpackSass 无法使用 webpack 加载正确的背景 SVG 图像
【发布时间】：2018-09-29 01:09:56
【问题描述】：

我在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 开发工具检查元素时，会生成以下输出：

【问题讨论】：

标签： css svg webpack sass

【解决方案1】：

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

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

【讨论】：