Vue uses style loader to add CSS style to Dom and reports an error

ERROR in ./src/css/normal.css
Module build failed: CssSyntaxError

(1:1) Unknown word

> 1 | var content = require("!!./normal.css");
    | ^
  2 | 
  3 | if (typeof content === 'string') {

 @ ./src/main.js 11:0-27
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The loader sequence you configured in the webpack.config.js file may be wrong
original code

const path=require('path')
module.exports={
  entry: './src/main.js',
  output: {
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader','style-loader']
      },

    ]
  }
}

Code after modification

const path=require('path')
module.exports={
  entry: './src/main.js',
  output: {
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },

    ]
  }
}

This is because when multiple loaders are configured, the program is read from right to left