vue loader different loaders for one extension

Question

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

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.

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.

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

Thanks for the help

Answer 1

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'
      }
    ]
}

This should cover cases as follows:

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

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