写点什么

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

发布于: 1 小时前
Vue进阶(幺伍捌):vue组包 CssSyntaxError unclosed bracket 错误解决方法

一、前言

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一下,问题解决。

二、拓展阅读


三、延伸阅读

3.1 问题描述

在使用el-table表格时,有时会用到show-overflow-tooltip属性,即当单元格内容不能完全显示时显示tooltip文字提示,并且单元格里的内容显示省略号。但是在 ie 浏览器中有时单元格里的内容过长并且显示了省略号,但是鼠标滑上却不显示tooltip

3.2 问题分析

这是因为单元格的padding-right影响到的,在css样式中添加以下代码即可:


.el-table .cell, .el-table th div {  padding-right: 0;}
复制代码

3.3 拓展阅读

发布于: 1 小时前阅读数: 3
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺伍捌):vue组包 CssSyntaxError unclosed bracket 错误解决方法