一、问题描述
使用vue+element-ui搭建网站时,打包到线上会有偶发性icon乱码的问题,
检查文件dist/css/app.xxx.css,发现所有的图标样式content的文本均异常。如:.el-icon-ice-cream-square:before{content:“”}。所以我们打包后的样式文件是有问题的。
二、解决方案
升级sass、配置vue.config.js
- sass版本要在1.39.0以上
npm install sass@1.39.0
- vue.config.js 增加css配置
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: '',
ws: true, // proxy websockets
pathRewrite: {
'^/api': '/'
}
}
},
disableHostCheck: true,
},
// 有用代码开始
css: {
loaderOptions: {
sass: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
},
// 有用代码结束
三、检查修复结果
重新打包后,检查文件dist/css/app.xxx.css,发现所有的图标样式content的文本正常了。例:el-icon-moon:before{content:“\e6f0”}.看到这个就代表修复成功了