使用 svg-url-loader 在 webpack 中加载 svg答案

【问题标题】：Loading an svg in webpack with svg-url-loader使用 svg-url-loader 在 webpack 中加载 svg
【发布时间】：2019-01-23 23:43:31
【问题描述】：

在我的 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. 我在我的 CSS 中添加了 background-image 和 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 文件，但都没有效果。

【问题讨论】：

另外，我在终端没有收到任何错误信息，webpack 正在编译成功。
我想我必须实现这个github.com/webpack-contrib/extract-text-webpack-plugin

标签： css svg webpack loader data-uri

【解决方案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文件，请检查。

【讨论】：

【解决方案2】：

你可以：

a) 在 webpack.config.js 中设置加载器：

example.js：

import ExampleIcon from 'assets/icons/example-icon.svg';

...

<ExampleIcon className={styles.exampleIcon} />

webpack.config.js：

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

b) 或在导入字符串中设置加载器：

import ExampleIcon from '!babel-loader!react-svg-loader!assets/icons/example-icon.svg';

...

<ExampleIcon className={styles.exampleIcon} />

【讨论】：

【解决方案3】：

我也遇到了同样的问题。我们有一个基于 url-loader 和 file-loader 的自定义 url-loader。当svg的大小限制为10Kb时，会调用url-loader处理svg，否则调用file-loader处理。看起来没问题，但是捆绑的文件显示它被不同的加载器处理了两次。 base64 编码的字符串是通过 module.exports 导出的，但在页面中路径没有被替换。这是因为我使用 vue-cli 创建项目，并且 svg 是由 file-loader 处理的。当我删除文件加载器的默认配置时，它按预期工作。

【讨论】：

【解决方案4】：

我和你有同样的问题。将我的文件加载器从 2.x.x 更新到最新版本解决了这个问题。

【讨论】：