elementUi icon乱码 原因 element-ui版本 1.版本过低,有些图标在低的版本当中并没有支持,所以讲elementui卸载后重新装最新的版本 在项目中升级ElementUI需要先卸载原先的版本,在命令行中输入: npm uninstall element-ui 2.重新安装需要的版本 npm install element-ui –S (安装最新版本) npm install element-ui@2...
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伪元素...
如题:ELementUI图标icon乱码问题 原因:在build编译时编译器处理导致的 解决方案 方案一:将saas更换为node-saas,安装不了问题可查看这里 方案二:升级saas和sass-loader 方案三:将element引入的样式代码注释,然后再main.js添加一行引入样式代码 注释代码:import'~element-ui/packages/theme-chalk/src/index'(可全局搜索...
.loader("vue-markdown-loader/lib/markdown-compiler") // .loader(path.resolve(__dirname, "./md-loader/index.js"));//element-ui的md处理在md-loader中,这里没有使用.处理方式在下面 .options({ raw: true, preventExtract: true, //这个加载器将自动从html令牌内容中提取脚本和样式标签 // 定义处...
compressed:输出方式删除所有无意义的空格、空白行、以及注释,将文件体积压缩到最小,同时也会做出其他调整,比如会自动替换占用空间最小的颜色表达方式 修改后重新编译部署发现源码和浏览器中加载的样式都没问题了: element-ui 官方仓库 Issuse: 使用dart-sass打包element icon出现乱码...
使用dart-sass打包element icon出现乱码:https://github.com/ElemeFE/element/issues/21763 页面刷新有时候elementui 的字体图标会乱码:https://github.com/ElemeFE/element/issues/19247 sass官网:https://sass-lang.com Vue CLI文档:https://cli.vuejs.org/zh/guide/css.html...
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里面就是正常内容了,字体图标也不会乱码了。
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...
在确定了是dartSass编译问题,在将icon转换成unicode的时候变成了乱码。 而element-ui官方推荐的是node-sass 所以最初解决方案是更换node-sass,经过不少折腾更换完成后,最终是解决了问题。 但是众所周知,node-sass安装非常的不方便,需要设置淘宝镜像,再加上我的是老项目,版本冲突也不少。
module.exports= {transpileDependencies: ['element-ui'],css: {loaderOptions: {scss: {additionalData:`@import "@/styles/var.scss";`,// 不同版本的 sass,此属性不同:data、prependData、additionalDatasassOptions: {outputStyle:'expanded'}// fix: 解决 element-ui 图标 icon 偶现乱码问题} ...