vue loader一个扩展的不同加载器 [英] vue loader different loaders for one extension

问题描述

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

I'm currently trying to use SVG in my vue-loader/webpack template project.

我需要加载不同类型的SVG：

图标：在我的组件中使用并加载了svg-inline加载程序，用于使用css进行内联和自定义。

SVGImages ：在img标记内部使用或像其他图像一样加载了url加载器的背景图像。

I need to load different kind of SVGs :
Icons : used inside my components and loaded with svg-inline loader for inlining and customization with css.
SVGImages : used inside img tag or background images loaded with url loader like the other images.

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

I tried the following configuration inside webpack.base.conf.js :

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

但我有一个错误：您可能需要一个适当的加载程序来处理此文件类型。

But i have an error : You may need an appropriate loader to handle this file type.

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

The error is about an svg used in background image, the svg inline loader seems to be working fine.

感谢您的帮助

推荐答案

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

If you are trying to load an svg file without a query, then I think you should not use resoueceQuery. So:

{
    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

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

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

Check this webpack issue for reference: https://github.com/webpack/webpack/issues/3497

这篇关于vue loader一个扩展的不同加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！