Webpack不能解析svg

Question

当我尝试使用svg作为具有相对路径的背景时，Webpack无法解析svg

image background-image: url('./checkmark.svg');

webpack给我‘无法解决’的错误

但是绝对路径是可以的。

background-image: url(C:\Users\leo\Desktop\project\hotel\src\components\checkbox-list\__menu\checkbox-list__checkbox\checkmark.svg);

实际上我的配置规则是：

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

我认为你需要在webpack中使用url_loader来加载svg，就像加载scss一样。然后在代码中导入它，并在组件或文件中使用它。

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

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

vue示例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>

解决方法无加载器

如果你是直接把它用到css中，然后用webpack加载css，那么请记住这个链接应该也能在dist中工作，所以你可以在dist中手动提供与src相同的链接文件。