解決一個小坑：error on line 1 at column 1: Document is empty

ssshooter發表於2022-07-08
Error

今天想整個 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 都把我整懵了，硬是整了半小時。

相關文章