Question

我目前正在尝试在我的vue-loader / webpack模板项目中使用SVG。

我需要加载不同类型的SVG：
图标：在我的组件中使用，并加载了svg-inline加载程序，用于使用css进行内联和自定义。
SVGImages ：在img标签内部或使用url加载器加载的背景图像中使用，就像其他图像一样。

我在webpack.base.conf.js中尝试了以下配置：

{
    test: /\.svg$/,
    oneOf: [
      {
        resourceQuery: /ico/, // image.svg?ico,
        use: 'svg-inline-loader'
      },
      {
        resourceQuery: '/normal/',
        use: 'url-loader'
      }
    ]
  }

但是我有一个错误：你可能需要一个合适的加载器来处理这个文件类型。

错误是关于背景图片中使用的svg，svg内联加载器似乎工作正常。

感谢您的帮助

Answer 1

如果您尝试在没有查询的情况下加载svg文件，那么我认为您不应该使用resoueceQuery。所以：

{
    test: /\.svg$/,
    oneOf: [
      {
        resourceQuery: /ico/, // image.svg?ico,
        use: 'svg-inline-loader'
      },
      {
        use: 'url-loader'
      }
    ]
}

这应包括如下情况：

image.svg?ico - svg-inline-loader
image.svg - url-loader
image.svg?foo - url-loader

请查看此webpack问题以供参考：https://github.com/webpack/webpack/issues/3497

vue loader一个扩展的不同加载器

1 个答案: