如题:ELementUI图标icon乱码问题 原因:在build编译时编译器处理导致的 解决方案 方案一:将saas更换为node-saas,安装不了问题可查看这里 方案二:升级saas和sass-loader 方案三:将element引入的样式代码注释,然后再main.js添加一行引入样式代码 注释代码:import'~element-ui/packages/theme-chalk/src/index'(可全局搜索...
elementui生产环境图标加载时偶而乱码 elementui 打包后icon图标加载偶尔会乱码
1、项目打包后,dist/css/app.xxx.css,发现所有的图标样式content的文本未正常显示了。例:el-icon-moon:before{content:“”}; 2、虽然页面图标可以正常显示,但是用F12,会发现字体依然是乱码; 三、原因 本项目使用的依赖包是sass(dart-sass),elementui使用的是node-sass,而dart-sass在编译element-ui里icon伪元素...
如上图,打包后的文件app.xxxxxx.css就是造成乱码的原因。 解决方法: 1,npm install sass@1.39.0,升级sass版本到1.39。 2, css: { loaderOptions: { sass: { sassOptions: { outputStyle: 'expanded' } } } },vue.config.js更改css打包配置。 3,npm install -g sass-migrator sass-migrator division ...
compressed:输出方式删除所有无意义的空格、空白行、以及注释,将文件体积压缩到最小,同时也会做出其他调整,比如会自动替换占用空间最小的颜色表达方式 修改后重新编译部署发现源码和浏览器中加载的样式都没问题了: element-ui 官方仓库 Issuse: 使用dart-sass打包element icon出现乱码...
简介:生产环境element icon乱码展示 项目打包部署后,使用的iconfont图标偶尔会出现乱码。网上查阅资料,原因主要有两个,一是element版本太低,不支持一些图标;二是sass编译导致的问题。 查看项目引入的element版本为2.10.1,排除版本低的原因,如果是版本低,则升级版本再尝试。再者,乱码问题并不是一直出现,存在随机性,也排...
2.然后就是重新引入iconfont的css文件, 在element-UI里找到已经编译好的iconfont的文件 .\node_modules\element-ui\lib\theme-chalk 在main.js里引入这个文件夹下的icon.css就行了。 import'element-ui/lib/theme-chalk/icon.css' 这样content里面就是正常内容了,字体图标也不会乱码了。
element ui icon 乱码 文章目录 用vue-cli3初始化项目 修改项目结构 先写个测试demo 1. packages下新建文件夹test,结构如下: 2. examples进行测试 3. examples展示markdown文件 4. 像elementui 一样的 可操作展示 用vue-cli3初始化项目 css 选了sasslint 选了ESLint + Prettier...
1、主要原因是sass 编译问题,针对iconfont 编译后会乱码, 2、项目中引用element,改了主题色,引入的elemtui 的scss文件包含了iconfont.scss,经过sass 会重新编译, /* 改变主题色变量 */$--color-primary: #CCA05D;/* icon font path, required */$--font-path: '~element-ui/lib/theme-chalk/fonts';@impo...
具体的表现就是偶尔刷新出现乱码,再次刷新就好了,不知道某一次刷新就会乱码; icon乱码表现 在本地试不会出现这个问题的;发现这个乱码现象是我们上线了自定义修改element的ui样式,引入了自定义的样式文件后出现的,以为是自定义的样式文件中引入的icon路径出现了问题,检查看本地自定义样式文件就是按照官方说明进行的引入...