在Webpack中使用不同的加载器，具体取决于我导入的位置

Question

我正在使用svg加载程序在我的React文件中导入SVG图标。

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图像。如果我这样做：

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

我的最终结果如下：

我想将url加载程序用于我的CSS文件。我试过这个：

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

在我的CSS中，我得到了：

这看起来像我想要的但是没有显示图像，如果我在单独的标签中打开网址，我会得到这个：

这让我觉得svg加载器仍在运行。

有没有办法根据我导入的文件指定不同的加载器？

Answer 1

添加发行者请参阅：webpack.js.org/configuration/module/#rule-issuer

一个例子：

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

{
  test: /\.svg/,
  issuer: /\.scss$/,
  use: {
    loader: 'svg-url-loader',
    options: {},
  },
},

Answer 2

我不确定你到底需要什么;听起来你需要触发webpack的模块解析。默认情况下，CSS加载程序将图像URL引用视为相对（就像它们通常是w / CSS一样）。 You need to prefix the URL with a '~'告诉它使用webpack的iot_test1, iot_test2解析来查找模块。