css - 使用 svg-url-loader 在 webpack 中加载 svg

Question

我在 webpack 工作流中使用 SVG 遇到了很多麻烦。我试图让它与 CSS 中的 background: url(sample.svg) 属性一起显示。单独使用它是行不通的，所以我想我已经使用了加载程序。以下是我使用的步骤。

我用了svg-url-loader加载 SVG。

1. 我通过 npm 安装了 svg-url-loader 并将其添加到我的 module.exports:

 {
        test: /\.svg/,
        use: {
            loader: 'svg-url-loader'
        }
      },

2. 我将其添加到我的 index.js 文件的顶部:

require('svg-url-loader!./images/topography.svg');

3. 我添加了 background-image 和我的 CSS 的 SVG 路径:

body {
  background-image: url("../images/topography.svg");
  background-size: 340px, auto;
  min-height: calc(100vh - 100px);
  margin: 50px;
  background-attachment: fixed;
  letter-spacing: -1px;
}

4. SVG 未呈现到页面。当我在浏览器中检查正文时，我发现了这个:

background: url(data:image/svg+xml,module.exports = __webpack_public_path__ + '8dccca4….svg';);

我对 data-uri 了解不多，所以也许我在那里遇到了问题。

此外，我已经尝试使用不同的 SVG 文件，但没有一个有效。

Answer 1

我遇到了同样的错误。经过一些调查，我发现我添加了另一个 svg 加载器导致了这个问题，所以我通过删除另一个 svg 加载器来修复它:

      {
        test: /\.svg/,
        use: {
            loader: 'svg-url-loader'
        }
      },

      {
        test: /\.svg$/,
        use: [
          "babel-loader",
          {
            loader: "react-svg-loader",
            options: {
              svgo: {
                plugins: [{ removeTitle: false }],
                floatPrecision: 2
              },
              jsx: true
            }
          }
        ]
      }

所以你可能还添加了一些额外的加载器来同时处理 svg 文件，请检查。