根据我从哪里导入，在 Webpack 使用不同的加载器

我正在使用 svg 加载器在我的 React 文件中导入 SVG 图标.

I'm using the svg loader to import SVG icons in my React file.

webpack.config.js:

{ test: /\.svg(\?.*)?$/, loader: 'svg' }

component.js:

import Icon from './icon.svg'

render () {
  return <svg {...Icon.attributes} dangerouslySetInnerHTML={{ __html: Icon.content }} />
}

到目前为止我没有任何问题.我还想在我的 CSS 中使用 SVG 图像.如果我这样做:

So far I have no issues. I also want to use SVG images in my CSS. If I do this:

.class {
  background-image: url('./icon.svg');
}

我的最终结果如下:

我想为我的 CSS 文件使用 url 加载器.我试过这个:

I would like to use the url loader for my CSS file. I tried this:

.class {
    url('url!./icon.svg?name=[path][name].[ext]&limit=1&mimetype=image/svg xml');
}

在我的 CSS 中，我得到:

In my CSS I get:

这看起来像我想要的，但没有显示图像，如果我在单独的选项卡中打开网址，我会得到这个:

This looks like what I want but the image is not displayed and if I open the url in a separate tab I get this:

这让我认为 svg 加载器仍在运行.

Which leads me to think that the svg loader is still running.

有没有办法根据我导入的文件指定不同的加载程序?

Is there a way to specify a different loader based on from which file I'm importing?