Reputation: 57
Webpack can't resolve svg when I try to use my svg as a background with relative path
image background-image: url('./checkmark.svg');
webpack give me 'can't resolve' error
But absolute path is ok.
background-image: url(C:\Users\leo\Desktop\project\hotel\src\components\checkbox-list\__menu\checkbox-list__checkbox\checkmark.svg);
Actualy my config rules:
module: {
rules: [{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg)$/,
type: 'asset',
},
{
test: /\.pug$/,
loader: 'pug-loader',
options: {
pretty: true,
},
},
],
},
Upvotes: 2
Views: 13135
Reputation: 1296
i think you need to use url_loader within webpack to load svgs the same way you loading scss . and then import it in your code and use it in your component or file .
npm i svg-url-loader --save-dev
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
},
<template>
<div>
<InlineSVG />
<div class="external-svg" />
</div>
</template>
<script>
import InlineSVG from './public/inline.svg';
export {
components: {
InlineSVG,
},
};
</script>
<style>
.external-svg {
background-image: url("./public/external.svg");
}
</style>
if you are using it into css directly and then css loaded using webpack than bare in mind that the link should be working in dist too , so you can provide the file manually in dist with the same link as in src
Upvotes: 4