根据我从哪里导入，在 Webpack 中使用不同的加载器 [英] Use different loader in Webpack depending on from where I'm importing

问题描述

我正在使用 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?

推荐答案

添加 issuer 见:webpack.js.org/configuration/module/#rule-issuer

Add issuer see: 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: {},
  },
},

这篇关于根据我从哪里导入，在 Webpack 中使用不同的加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！