使用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.
步骤:
- 卸载dart-sass npm uninstall sass
- 安装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到生产环境,就可以啦~撒花✿✿ヽ(°▽°)ノ✿


