WebpackエラーModule build failed(from./node_modules/css-loader/dist/cjs.js):CssSyntaxError

エラー

npm run build

> [email protected] build /home/q/www/webpack_test
> webpack

Hash: e5a0c99f86239b7fee98
Version: webpack 4.39.3
Time: 345ms
Built at: 08/30/2019 7:13:18 PM
 1 asset
Entrypoint app = app.bundle.js
[1] ./src/index.js 313 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
[4] ./src/style.css 593 bytes {0} [built] [failed] [1 error]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/style.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) Unknown word

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

 @ ./src/index.js 2:0-21
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.

あなたのwebpackを見てください.config.jsのcss構成は次のとおりです.

rules: [
      {
        test: /\.css$/,
        use: [
           'css-loader',
           'style-loader',
    
        ]
      }
    ]

前にstyle-loader、後にcss-loaderを必要とするように変更

rules: [
      {
        test: /\.css$/,
        use: [
      	   'style-loader',
           'css-loader',
        ]
      }
    ]

再びnpm run buildは成功しました!