Solve a small pit: error on line 1 at column 1: Document is empty

Today, thinking of the whole svg as a background image really made me stunned.

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

Such a simple sentence just can't work, the compilation does not report an error, and the picture just doesn't come out. At first I thought it was a size problem, then I thought it was svg that couldn't be used as a background, and then I thought there was a problem with less-loader.

Only when I opened the packaged svg link at the end did I find that the svg didn't seem to be packaged normally at all. Reported a error on line 1 at column 1: Document is empty .

The original svg loading method:

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

Change it to this to handle it correctly:

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

Of course, this is the solution of webpack5, and there are historical legacy products such as svg-inline-loader .

I took it, webpack loading svg made me stunned, it took half an hour.