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 就成功了！