vue-element-admin项目打包后,iconfont图标出现乱码

vue

使用vue-element-admin或者vue-element-template开发的项目,打包到线上,就出现了图标乱码,f12后能看到icon元素为.el-icon-close:before { content: "□"}的情况(如下)

图标乱码

解决办法:

方法一

vue-element-admin源码是采用dart-sass编译sass,而element-ui目前还是采用node-sass编译sass。两者可能存在冲突,所以我们将dart-sass替换成node-sass.

步骤:
  1. 卸载dart-sass npm uninstall sass
  2. 安装node-sass npm install node-sass -D

方法二

node-sass的‘坑’那也是又大又深呐,可能不少人踩过吧,真的分分钟暴走!!!而且sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。所以不想用回node-sass,就可以试试下面这个方法(亲测有效哦~)

步骤:

将src/styles/element-variables.scss文件下@import "~element-ui/packages/theme-chalk/src/index.scss全量引入修改为按需引入(除了icon.scss) 注释掉这一行 // @import "~element-ui/packages/theme-chalk/src/index";//为解决elementui-在生产环境图标乱码的问题,将此全局引用改为下面的方式

1@import "~element-ui/packages/theme-chalk/src/pagination.scss"; 2@import "~element-ui/packages/theme-chalk/src/dialog.scss"; 3@import "~element-ui/packages/theme-chalk/src/autocomplete.scss"; 4@import "~element-ui/packages/theme-chalk/src/dropdown.scss"; 5@import "~element-ui/packages/theme-chalk/src/dropdown-menu.scss"; 6@import "~element-ui/packages/theme-chalk/src/dropdown-item.scss"; 7@import "~element-ui/packages/theme-chalk/src/menu.scss"; 8@import "~element-ui/packages/theme-chalk/src/submenu.scss"; 9@import "~element-ui/packages/theme-chalk/src/menu-item.scss"; 10@import "~element-ui/packages/theme-chalk/src/menu-item-group.scss"; 11@import "~element-ui/packages/theme-chalk/src/input.scss"; 12@import "~element-ui/packages/theme-chalk/src/input-number.scss"; 13@import "~element-ui/packages/theme-chalk/src/radio.scss"; 14@import "~element-ui/packages/theme-chalk/src/radio-group.scss"; 15@import "~element-ui/packages/theme-chalk/src/radio-button.scss"; 16@import "~element-ui/packages/theme-chalk/src/checkbox.scss"; 17@import "~element-ui/packages/theme-chalk/src/checkbox-button.scss"; 18@import "~element-ui/packages/theme-chalk/src/checkbox-group.scss"; 19@import "~element-ui/packages/theme-chalk/src/switch.scss"; 20@import "~element-ui/packages/theme-chalk/src/select.scss"; 21@import "~element-ui/packages/theme-chalk/src/button.scss"; 22@import "~element-ui/packages/theme-chalk/src/button-group.scss"; 23@import "~element-ui/packages/theme-chalk/src/table.scss"; 24@import "~element-ui/packages/theme-chalk/src/table-column.scss"; 25@import "~element-ui/packages/theme-chalk/src/date-picker.scss"; 26@import "~element-ui/packages/theme-chalk/src/time-select.scss"; 27@import "~element-ui/packages/theme-chalk/src/time-picker.scss"; 28@import "~element-ui/packages/theme-chalk/src/popover.scss"; 29@import "~element-ui/packages/theme-chalk/src/tooltip.scss"; 30@import "~element-ui/packages/theme-chalk/src/message-box.scss"; 31@import "~element-ui/packages/theme-chalk/src/breadcrumb.scss"; 32@import "~element-ui/packages/theme-chalk/src/breadcrumb-item.scss"; 33@import "~element-ui/packages/theme-chalk/src/form.scss"; 34@import "~element-ui/packages/theme-chalk/src/form-item.scss"; 35@import "~element-ui/packages/theme-chalk/src/tabs.scss"; 36@import "~element-ui/packages/theme-chalk/src/tab-pane.scss"; 37@import "~element-ui/packages/theme-chalk/src/tag.scss"; 38@import "~element-ui/packages/theme-chalk/src/tree.scss"; 39@import "~element-ui/packages/theme-chalk/src/alert.scss"; 40@import "~element-ui/packages/theme-chalk/src/notification.scss"; 41@import "~element-ui/packages/theme-chalk/src/slider.scss"; 42@import "~element-ui/packages/theme-chalk/src/loading.scss"; 43@import "~element-ui/packages/theme-chalk/src/row.scss"; 44@import "~element-ui/packages/theme-chalk/src/col.scss"; 45@import "~element-ui/packages/theme-chalk/src/upload.scss"; 46@import "~element-ui/packages/theme-chalk/src/progress.scss"; 47@import "~element-ui/packages/theme-chalk/src/spinner.scss"; 48@import "~element-ui/packages/theme-chalk/src/message.scss"; 49@import "~element-ui/packages/theme-chalk/src/badge.scss"; 50@import "~element-ui/packages/theme-chalk/src/card.scss"; 51@import "~element-ui/packages/theme-chalk/src/rate.scss"; 52@import "~element-ui/packages/theme-chalk/src/steps.scss"; 53@import "~element-ui/packages/theme-chalk/src/step.scss"; 54@import "~element-ui/packages/theme-chalk/src/carousel.scss"; 55@import "~element-ui/packages/theme-chalk/src/scrollbar.scss"; 56@import "~element-ui/packages/theme-chalk/src/carousel-item.scss"; 57@import "~element-ui/packages/theme-chalk/src/collapse.scss"; 58@import "~element-ui/packages/theme-chalk/src/collapse-item.scss"; 59@import "~element-ui/packages/theme-chalk/src/cascader.scss"; 60@import "~element-ui/packages/theme-chalk/src/color-picker.scss"; 61@import "~element-ui/packages/theme-chalk/src/transfer.scss"; 62@import "~element-ui/packages/theme-chalk/src/container.scss"; 63@import "~element-ui/packages/theme-chalk/src/header.scss"; 64@import "~element-ui/packages/theme-chalk/src/aside.scss"; 65@import "~element-ui/packages/theme-chalk/src/main.scss"; 66@import "~element-ui/packages/theme-chalk/src/footer.scss"; 67@import "~element-ui/packages/theme-chalk/src/timeline.scss"; 68@import "~element-ui/packages/theme-chalk/src/timeline-item.scss"; 69@import "~element-ui/packages/theme-chalk/src/link.scss"; 70@import "~element-ui/packages/theme-chalk/src/divider.scss"; 71@import "~element-ui/packages/theme-chalk/src/image.scss"; 72@import "~element-ui/packages/theme-chalk/src/calendar.scss"; 73@import "~element-ui/packages/theme-chalk/src/backtop.scss"; 74@import "~element-ui/packages/theme-chalk/src/infinite-scroll.scss"; 75@import "~element-ui/packages/theme-chalk/src/page-header.scss"; 76@import "~element-ui/packages/theme-chalk/src/cascader-panel.scss"; 77@import "~element-ui/packages/theme-chalk/src/avatar.scss"; 78@import "~element-ui/packages/theme-chalk/src/drawer.scss"; 79@import "~element-ui/packages/theme-chalk/src/popconfirm.scss";

最后重新build到生产环境,就可以啦~撒花✿✿ヽ(°▽°)ノ✿

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )