[英]Webpack + React + multiple SVG loaders issue
{
test: /\.svg/,
use: [
{
loader: 'url-loader'
},
{
loader: 'svg-react-loader'
}
]
}
This is module: { rules: [
section regarding SVG loaders in my webpack.config.js
这是
module: { rules: [
我的webpack.config.js
有关SVG加载程序的webpack.config.js
Anyone used similar setup and had issues with importing svg files in React? 任何人都使用类似的设置,并在React中导入svg文件时遇到问题?
I need both to load svg in CSS and to import them in React. 我既需要在CSS中加载svg,又需要在React中导入它们。 If I use
如果我用
But together imports in React fails with the following error: 但是在React中一起导入失败,并出现以下错误:
Module build failed: Error: Non-whitespace before first tag.
Here is how I import the SVG in React cmp: 这是我在React cmp中导入SVG的方法:
import StarIcon from 'svg-react-loader!mdi-svg/svg/star.svg';
Apparently the cleanest way to handle loaders without a need to reference the loader in the actual JS / CSS code during the imports is to use oneOf with exclude property: 显然,在导入过程中无需在实际的JS / CSS代码中引用加载程序的最简单的处理加载程序的方法是使用带有exclude属性的oneOf:
{
test: /\.svg$/,
oneOf: [
{
exclude: path.resolve(__dirname, '../src/'),
use: 'svg-react-loader'
},
{
exclude: path.resolve(__dirname, '../node_modules/'),
use: 'url-loader'
},
],
}
A better way is to use oneOf
, but with include
option, which is logically more correct, than exclude
option: 更好的方法是使用
oneOf
,但是使用include
选项,从逻辑oneOf
,它比exclude
选项更正确:
{
test: /\.svg$/,
oneOf: [
{
include: path.resolve(__dirname, '../node_modules/'),
use: 'svg-react-loader'
},
{
include: path.resolve(__dirname, '../src/'),
use: 'url-loader'
},
],
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.