Vue项目进行webpack打包时出现css报错

在进行npm run build进行打包时出现报错: Unknow word

image.png

此时根据报错信息无法直接具体的定位到对应的css

解决方案

暂时注释掉OptimizeCSSPlugin相关配置，等待问题解决后恢复。

1. 找到build/webpack.prod.conf文件，注释掉此plugin

   
   
   image.png

2. 再次打包：npm run build

   
   
   image.png
   
   

   此时打包成功

3. 在生成的dist中查找出现问题的css，定位到具体样式

   
   
   image.png
   
   

   此时发现是em标签出现问题，根据上下样式查找出原样式表的相应位置及属性

4. 查找样式表问题的对应位置并进行修改

   
   
   image.png
   
   

   ps: 我打包失败的原因是因为样式表缩进问题。

5. 更改后放开插件注释并重新build

   
   
   image.png

此时打包成功！ 问题完美解决！