今天想整个 svg 当背景图,实属把我整懵了。
background-image: url('./icons/add-circle.svg');
这么简单的一句话硬是跑不通,编译倒是没报错,图就是不出来。一开始以为是尺寸问题,然后以为是 svg 不能当背景,然后是以为 less-loader 有问题。
到最后直接打开打包出来的 svg 链接才发现,这 svg 好像根本没正常打包。报了个 error on line 1 at column 1: Document is empty
。
原本的 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 都把我整懵了,硬是整了半小时。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。