运行npm run build时webpack报css-loader CssSyntaxError错误如何解决

错误原因 #

webpack的loader执行顺序为数组从右向左逆序执行，你当前配置的css loader顺序错误：先执行style-loader将css文件转换为包含样式注入逻辑的JS代码，再传入css-loader时被识别为非法CSS语法，触发本次报错。

修复步骤 #

• 修改webpack.config.js中的CSS处理规则，调整loader顺序：
  将原有规则

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

替换为

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

• 删除项目本地的node_modules文件夹以及包管理锁文件（package-lock.json或yarn.lock），避免依赖缓存影响
• 执行npm install重新安装所有依赖
• 执行npm run build重新打包即可

内容的提问来源于stack exchange，提问作者Shakya Peiris