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\ponents\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,
      },
    },
  ],
},

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\ponents\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,
      },
    },
  ],
},

• javascript
• webpack

1 Answer 1

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 ponent or file .

npm i svg-url-loader --save-dev

{
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },

vue example srouce

<template>
  <div>
    <InlineSVG />
    <div class="external-svg" />
  </div>
</template>

<script>
import InlineSVG from './public/inline.svg';

export {
  ponents: {
    InlineSVG,
  },
};
</script>

<style>
.external-svg {
  background-image: url("./public/external.svg"); 
}
</style>

workaround no loader

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