共计 444 个字符,预计需要花费 2 分钟才能阅读完成。
明天想整个 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 都把我整懵了,硬是整了半小时。
正文完
发表至: javascript
2022-07-01