Vue 进阶（幺零八）：npm run build 错误 (node:7852) UnhandledPromiseRejectionWarning: CssSyntaxError:xxxx. 解决分析

一、前言

在项目打包过程中，突然报如下错误：

Vue npm run build 错误 (node:7852) UnhandledPromiseRejectionWarning: CssSyntaxError:xxxx.

但是在执行 npm run dev过程中，并未错误或告警信息。

二、解决方案

打开webpack.prod.conf.js ，注释掉以下配置代码

new OptimizeCSSPlugin({      cssProcessorOptions: config.build.productionSourceMap      ? { safe: true, map: { inline: false } }      : { safe: true }    }),

有关OptimizeCSSPlugin组件的作用，可参考博文《Vue进阶（五十三）：vue-cli脚手架build目录中的webpack.prod.conf.js配置文件》。

通过注释掉该段代码，项目可正常编译。不过，OptimizeCSSPlugin组件的作用主要是实现压缩css代码，还能去掉extract-text-webpack-plugin插件抽离文件产生的重复代码，因为同一个css可能在多个模块中出现（重复出现的样式可以抽离出来作为公共样式文件）所以会导致重复代码。

由此可知，通过使用以上组件，可压缩编译后的CSS项目样式文件。故该组件还是需要使用的。

通过查看错误提示信息，可知是theme-colors.css文件编译报错，由于该文件是由主题色切换生成的样式文件，通过查看处理逻辑，怀疑是颜色替换过程中报错，通过查看替换色使用地方，发现存在循环处理过程中使用同种带替换主题色的情形。

通过将该颜色码值修改为与待替换主题色不一致，项目编译成功。

问题总结：在循环使用项目主体色过程中，生成压缩后的颜色样式存在问题，具体解决措施暂不考虑。

OptimizeCSSPlugin组件部分还是不应该注掉，虽然可以解决问题，但并不是最优解。还应结合具体的错误原因，找到根本原因，然后解决。其他错误原因可能如下：

三、拓展阅读

• 《Vue2专栏》