It's no longer allowed to omit the '-loader' suffix when using loaders

This is the first bug I encountered in learning vue2. I checked the documents on the internet. They all said that adding the suffix of - loader is enough, but it still hasn't been solved. I found the God and finally solved the problem and shared it with you.  
Netizens Answer:

webpack.config.js file
modules Under module
     loaders: [
           {test: /\.css$/, 
            loader: 'style-loader!css-loader'}//2.0 does not seem to support abbreviations
        ]

Solutions:
1) Reload style-loader and css-loader files (if you prefer Less, you can also follow less-loader at the same time)

//command line
npm install --save-dev css-loader //Reload css-loader, remember version number
npm install style-loader --save-dev //Reload style-loader, remember version number
npm install --save-dev less-loader less //Reload less-loader, remember version number
//Install Less, note that the less-loader plug-in must rely on less
//Less needs to be installed separately, not with less-loader
npm install less --save-dev 

2) configuring module module module of webpack.config.js

      {
          test: /\.css$/,
          //The following two lines serve the same purpose. Choose your preferred style.
          // use: [ 'style-loader', 'css-loader' ]
          loader: 'style-loader!css-loader'
      },
      {
          test: /\.less$/,
          //The following two lines serve the same purpose. Choose your preferred style.
          // loader: 'style-loader!css-loader!less-loader'
          use: [
              'style-loader',
              { loader: 'css-loader', options: { importLoaders: 1 } },
              'less-loader'
          ]
      },

• css/.less file
  At the head of the tag, introduce the. css file in the following format

//Introduce. css file
import css from 'File directory.css'
//Introduce. less file
import css from 'File directory.less'

) Configure package.json
This document includes production environment configuration, development environment configuration and test environment configuration.
De Dependencies: Add the loader and version number you quoted as follows

//Here is my development environment configuration
 "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",   //Introducing css loader
    "style-loader": "^0.19.0", //Introduction of style loader
    "less-loader": "^4.0.5",   //Introducing less loader
    "less": "^2.7.3",          //Introducing less
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

5) Rerun

    npm i   
    npm run dev

6) pay attention to
In webpack2, the abbreviation style!css is no longer recommended, but - loader should be added, such as

 style-loader!css-loader

In the above operations, there may be repetition, but such a series of operations can ensure that. less files and. css files can be compiled correctly.

Official documents: http://www.css88.com/doc/webpack2/loaders/css-loader/