Vue进阶（幺伍捌）：vue 组包 CssSyntaxError unclosed bracket 错误解决方法(1)

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

---

一、前言

在Vue项目npm run build过程中，突然爆出CssSyntaxError unclosed bracket的错误提示，一脸懵，好好的项目怎么突然就出幺蛾子了呢？

奇怪的是项目执行npm run dev命令时，可正常运行，而pro版本跟dev的版本中差了一个optimize-css-assets-webpack-plugin这个文件的引用，所以在webpack.prod.conf.js中找到该文件引用处：

// optimize-css-assets-webpack-plugin插件的作用是压缩css代码的，还能去掉extract-text-webpack-plugin插件抽离文件产生的重复代码，因为同一个css可能在多个模块中出现所以会导致重复代码，换句话说这两个插件是两兄弟
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

首先将上述组件引用注释掉,然后执行npm run build,build成功，随后就很简单了，就是去看一下build好的dist文件里面的app....css，然后继续去搜索"//"，这样子的工作量就少了很多，找到相应的注释代码，然后删掉不合理的注释代码。

最后就是把webpack.prod.conf.js中注释掉的内容恢复，然后重新build一下，问题解决。

二、拓展阅读

• 《Vue进阶（五十一）： vue-cli脚手架build目录中的webpack.base.conf.js配置文件》
• 《Vue进阶（五十二）：vue-cli脚手架build目录中的webpack.dev.conf.js配置文件》
• 《Vue进阶（五十三）：vue-cli脚手架build目录中的webpack.prod.conf.js配置文件》

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**