(文章目录)
一、前言
在项目打包过程中，突然报如下错误：
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组件部分还是不应该注掉，虽然可以解决问题，但并不是最优解。还应结合具体的错误原因，找到根本原因，然后解决。其他错误原因可能如下：
