Webpack 无法解析 svg

Question

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

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 component 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 {
  components: {
    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