生产环境icon偶尔乱码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102

因为自定义主题是需要将scss加载进来的，而scss中引用的字体不能被对应的loader正常解析（猜测是这个原因），而将element自己便于好的css使用js模块引入就没问题。 应该还是scss编译机制的问题，目前虽然没有找到具体原因，但是已经解决，方法如下： 将自定义主题引入入口文件 scss @import "~element-ui/packages/theme-chalk/src/index.scss"; 中的内容解开引用，这里不去写具体内容，指的注意的是以下： 注意将第一个 @import "./base.scss"; 再次解开为： sass @import "./common/transition.scss"; 也就是将 内部的./icon.scss 排除掉   然后将elementui编译好的icon.css单独用js进行引入加载，即可解决，以下是完整代码： `scss //这里写你的自定义主题变量配置   $--color-primary:#4b6eef;   //将入口文件的引用拆出来引用到这里   @import "~element-ui/packages/theme-chalk/src/pagination.scss"; @import "~element-ui/packages/theme-chalk/src/dialog.scss"; @import "~element-ui/packages/theme-chalk/src/autocomplete.scss"; @import "~element-ui/packages/theme-chalk/src/dropdown.scss"; @import "~element-ui/packages/theme-chalk/src/dropdown-menu.scss"; @import "~element-ui/packages/theme-chalk/src/dropdown-item.scss"; @import "~element-ui/packages/theme-chalk/src/menu.scss"; @import "~element-ui/packages/theme-chalk/src/submenu.scss"; @import "~element-ui/packages/theme-chalk/src/menu-item.scss"; @import "~element-ui/packages/theme-chalk/src/menu-item-group.scss"; @import "~element-ui/packages/theme-chalk/src/input.scss"; @import "~element-ui/packages/theme-chalk/src/input-number.scss"; @import "~element-ui/packages/theme-chalk/src/radio.scss"; @import "~element-ui/packages/theme-chalk/src/radio-group.scss"; @import "~element-ui/packages/theme-chalk/src/radio-button.scss"; @import "~element-ui/packages/theme-chalk/src/checkbox.scss"; @import "~element-ui/packages/theme-chalk/src/checkbox-button.scss"; @import "~element-ui/packages/theme-chalk/src/checkbox-group.scss"; @import "~element-ui/packages/theme-chalk/src/switch.scss"; @import "~element-ui/packages/theme-chalk/src/select.scss"; @import "~element-ui/packages/theme-chalk/src/button.scss"; @import "~element-ui/packages/theme-chalk/src/button-group.scss"; @import "~element-ui/packages/theme-chalk/src/table.scss"; @import "~element-ui/packages/theme-chalk/src/table-column.scss"; @import "~element-ui/packages/theme-chalk/src/date-picker.scss"; @import "~element-ui/packages/theme-chalk/src/time-select.scss"; @import "~element-ui/packages/theme-chalk/src/time-picker.scss"; @import "~element-ui/packages/theme-chalk/src/popover.scss"; @import "~element-ui/packages/theme-chalk/src/tooltip.scss"; @import "~element-ui/packages/theme-chalk/src/message-box.scss"; @import "~element-ui/packages/theme-chalk/src/breadcrumb.scss"; @import "~element-ui/packages/theme-chalk/src/breadcrumb-item.scss"; @import "~element-ui/packages/theme-chalk/src/form.scss"; @import "~element-ui/packages/theme-chalk/src/form-item.scss"; @import "~element-ui/packages/theme-chalk/src/tabs.scss"; @import "~element-ui/packages/theme-chalk/src/tab-pane.scss"; @import "~element-ui/packages/theme-chalk/src/tag.scss"; @import "~element-ui/packages/theme-chalk/src/tree.scss"; @import "~element-ui/packages/theme-chalk/src/alert.scss"; @import "~element-ui/packages/theme-chalk/src/notification.scss"; @import "~element-ui/packages/theme-chalk/src/slider.scss"; @import "~element-ui/packages/theme-chalk/src/loading.scss"; @import "~element-ui/packages/theme-chalk/src/row.scss"; @import "~element-ui/packages/theme-chalk/src/col.scss"; @import "~element-ui/packages/theme-chalk/src/upload.scss"; @import "~element-ui/packages/theme-chalk/src/progress.scss"; @import "~element-ui/packages/theme-chalk/src/spinner.scss"; @import "~element-ui/packages/theme-chalk/src/message.scss"; @import "~element-ui/packages/theme-chalk/src/badge.scss"; @import "~element-ui/packages/theme-chalk/src/card.scss"; @import "~element-ui/packages/theme-chalk/src/rate.scss"; @import "~element-ui/packages/theme-chalk/src/steps.scss"; @import "~element-ui/packages/theme-chalk/src/step.scss"; @import "~element-ui/packages/theme-chalk/src/carousel.scss"; @import "~element-ui/packages/theme-chalk/src/scrollbar.scss"; @import "~element-ui/packages/theme-chalk/src/carousel-item.scss"; @import "~element-ui/packages/theme-chalk/src/collapse.scss"; @import "~element-ui/packages/theme-chalk/src/collapse-item.scss"; @import "~element-ui/packages/theme-chalk/src/cascader.scss"; @import "~element-ui/packages/theme-chalk/src/color-picker.scss"; @import "~element-ui/packages/theme-chalk/src/transfer.scss"; @import "~element-ui/packages/theme-chalk/src/container.scss"; @import "~element-ui/packages/theme-chalk/src/header.scss"; @import "~element-ui/packages/theme-chalk/src/aside.scss"; @import "~element-ui/packages/theme-chalk/src/main.scss"; @import "~element-ui/packages/theme-chalk/src/footer.scss"; @import "~element-ui/packages/theme-chalk/src/timeline.scss"; @import "~element-ui/packages/theme-chalk/src/timeline-item.scss"; @import "~element-ui/packages/theme-chalk/src/link.scss"; @import "~element-ui/packages/theme-chalk/src/divider.scss"; @import "~element-ui/packages/theme-chalk/src/image.scss"; @import "~element-ui/packages/theme-chalk/src/calendar.scss"; @import "~element-ui/packages/theme-chalk/src/backtop.scss"; @import "~element-ui/packages/theme-chalk/src/infinite-scroll.scss"; @import "~element-ui/packages/theme-chalk/src/page-header.scss"; @import "~element-ui/packages/theme-chalk/src/cascader-panel.scss"; @import "~element-ui/packages/theme-chalk/src/avatar.scss"; @import "~element-ui/packages/theme-chalk/src/drawer.scss"; @import "~element-ui/packages/theme-chalk/src/popconfirm.scss";   main.js import 'element-ui/lib/theme-chalk/icon.css' 是个笨办法，但是从浏览器控制台可以看到content可以正常加载了.

　　来自：https://github.com/ElemeFE/element/issues/19247#issuecomment-738630436