{
test: /\.svg/,
use: [
{
loader: 'url-loader'
},
{
loader: 'svg-react-loader'
}
]
}
这是关于我的module: { rules: [
中的SVG加载器的webpack.config.js
部分
任何人使用类似的设置,并在React中导入svg文件有问题?
我需要在CSS中加载svg并在React中导入它们。如果我使用
但是React中的一起导入失败,出现以下错误:
Module build failed: Error: Non-whitespace before first tag.
以下是我在React cmp中导入SVG的方法:
import StarIcon from 'svg-react-loader!mdi-svg/svg/star.svg';
显然,最简单的处理加载器的方法是在导入过程中不需要在实际的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'
},
],
}
更好的方法是使用oneOf
,但使用include
选项,这在逻辑上比exclude
选项更正确:
{
test: /\.svg$/,
oneOf: [
{
include: path.resolve(__dirname, '../node_modules/'),
use: 'svg-react-loader'
},
{
include: path.resolve(__dirname, '../src/'),
use: 'url-loader'
},
],
}