乐趣区

关于javascript:解决一个小坑error-on-line-1-at-column-1-Document-is-empty

明天想整个 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 都把我整懵了,硬是整了半小时。

退出移动版