今天想整个 svg 当背景图,实属把我整懵了。

background-image: url('./icons/add-circle.svg');

这么简单的一句话硬是跑不通,编译倒是没报错,图就是不出来。一开始以为是尺寸问题,然后以为是 svg 不能当背景,然后是以为 less-loader 有问题。

到最后直接打开打包出来的 svg 链接才发现,这 svg 好像根本没正常打包。报了个 error on line 1 at column 1: Document is empty

image.png

原本的 svg 加载方式:

{
  test: /\.(ttf|woff|woff2|eot|svg)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: false,
      },
    },
  ],
}

改成这样就能正确处理:

{ test: /\.svg/, type: 'asset/inline' },

当然这个是 webpack5 的方案,之前还有 svg-inline-loader 之类的历史遗留产物。

服了,webpack 加载 svg 都把我整懵了,硬是整了半小时。


ssshooter
3.7k 声望1.8k 粉丝