在我的 webpack.config.js
我有这个:
module: {
loaders: [
{
test: /\.css$/,
include: APP_DIR,
loader: 'style-loader!css-loader',
},
{
test: /\.scss$/,
include: APP_DIR,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.svg$/,
loader: 'babel-loader!react-svg-loader',
},
],
},
我用它直接在组件中导入一些 svg 文件。
但是现在我只想通过 scss 显示驻留在我的 React App 文件夹中的 svg 文件。但是 babel-loader!react-svg-loader
阻止了它的发生。我正在通过 React 加载 scss。
这个:
background-image: url('../assets/icons/pattern/size_35.svg');
成为
background-image: url([object Object]);
我可以这样做,但感觉很老套:
background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');
根据我的理解,对于这种情况,我不应该有任何文件加载器,但因为我已经有一个它阻止了它的工作。
不过,我确实想解析来自 React 应用程序的相对 URL。这样:
background-image: url('../assets/icons/pattern/size_35.svg');
变成这样
background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');
在前端。
最佳答案
如果你只想绕过你的react-svg-loader
一次,你可以编写内联加载器:
background-image: url('!!file-loader!../assets/icons/pattern/size_35.svg');
如果这很常见,您可以使用 resourceQuery对于您想作为文件处理的 svg:
{
test: /\.svg$/,
oneOf: [
{
resourceQuery: /file/, // size_35.svg?file
use: 'file-loader'
},
{
use: 'babel-loader!react-svg-loader'
}
]
}
关于javascript - 如何绕过文件加载器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51173735/