element-ui iconfont乱码问题处理-程序员宅基地

技术标签: css  vue  elementui  sass  

一、问题

         

 

      使用element-UI的项目,打包部署以后,偶尔会出现iconfont显示乱码,但是刷新后又会好。研究后,查看打包后的css, 图标字体的content经过scss编译以后变成了这样

             

 

      不过正常情况下图标还是会显示的,但是偶尔进入页面后,所有的iconfont图标会变成乱码。

二、原因

       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';

@import "~element-ui/packages/theme-chalk/src/index";

三、解决

       对于第一个原因,sass的编译问题我们改变不了,所以我们就针对第2个原因来处理。如果引入的是elementui 编译后的css 文件,sass就不会再编译了,但我们这里需要改变主题色 需要用到scss变量,

      所以最简单粗暴的方法是:

     1. 项目里自定义element-ui主题的文件element-variables.scss,这个文件里本来有一个引入所有element组件scss文件的一行,这个文件其实也是包含了element所有模块的的scss文件

@import "~element-ui/packages/theme-chalk/src/index";

       把这一行去掉,然后直接引入所有的scss文件,当然要去掉iconfont的scss
       这里是所有组件,你也可以按需引入:

     以下是所有scss文件,可以复制哦

/* 改变主题色变量 */
$--color-primary: #CCA05D;

/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/common/transition.scss";
@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";
@import "~element-ui/packages/theme-chalk/src/skeleton.scss";
@import "~element-ui/packages/theme-chalk/src/skeleton-item.scss";
@import "~element-ui/packages/theme-chalk/src/empty.scss";
@import "~element-ui/packages/theme-chalk/src/descriptions.scss";
@import "~element-ui/packages/theme-chalk/src/descriptions-item.scss";
@import "~element-ui/packages/theme-chalk/src/result.scss";

   2、然后就是重新引入iconfont的css文件,在main.js里引入element的icon.css

import Element from 'element-ui'
import "@/styles/element-variables.scss";
import 'element-ui/lib/theme-chalk/icon.css'

      再次打包编译后,查看css 文件就不会有乱码了

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ringlot/article/details/122577624

智能推荐

VRay Next for SketchUp 新功能实用技巧_vary for sketchup 历史对比不能使用-程序员宅基地

文章浏览阅读1.8k次。6分钟,掌握VRay Next for SketchUp新功能实用技巧!_vary for sketchup 历史对比不能使用

intelliSense: 未定义标识符 "cout"小记_1intellisense: 未定义标识符 "cout"d:\net work\project1\p-程序员宅基地

文章浏览阅读1.7w次,点赞5次,收藏5次。2 IntelliSense: 未定义标识符 "cout"这个错误,是在测试书上的例子时出现的,都是Cpp文件,都用的头,有的报错了,有的没有。后来发现没报错的头部是这样的:#include #include "stdafx.h"using namespace std;报错的cpp文件只有头部:#include 在出现2 IntelliSense:_1intellisense: 未定义标识符 "cout"d:\net work\project1\project1\yyy.cpp9

mybatis 中使用postgreSQL的UUID 解决方法_mybatis-plus insert方法插入postgres数据库 uuid-程序员宅基地

文章浏览阅读5.6k次。网上的解决方法是在java实体类中使用string类型,读取的时候转换成字符串,插入的时候转uuid。查询的时候这样子转换<id column="application_id" property="applicationId" javaType="java.lang.String" jdbcType="VARCHAR" />插入的时候 <insert id="insert&qu_mybatis-plus insert方法插入postgres数据库 uuid

bigdata_kafka与streaming_idea的big data tools插件连接kafka-程序员宅基地

文章浏览阅读3.6k次。一丶Kafka应用 鉴于kafka在实际使用时,绝大多数应用场景均为Producer和Consumer的API配合使用,故在此只介绍这两种API操作方法,其它的Connector和Streams还有admin可以视自身情况自行学习。 1.java版 实现步骤 创建maven项目(done) 加入kafka依赖 producer push message实现 consumerpull message实现 效..._idea的big data tools插件连接kafka

PHP+Mysql 实现留言板_html+php+mysql 实现留言板-程序员宅基地

文章浏览阅读911次。最近看了下PHP基础语法,就想利用这些基本东西实现留言板,也是对基础知识的一个巩固。什么是留言板?一种可以用来记录,展示文字信息的载体。现切入正题,说说本次留言板是怎么实现!首先用户提交留言后,相关内容存入服务器,当他想看的时候后台再把所有留言读出来,最后显示在浏览器上,用户就可以看到留言了。这其中后台需要便于读写数据的一个工具,我选择MySQL数据库来帮助_html+php+mysql 实现留言板

01.初识数据库_select user,host,password from-程序员宅基地

文章浏览阅读339次。01.初识数据库1. 数据库管理软件的由来基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上。如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件都运行在一台机器上,那么文件存取数据并没有问题。很不幸,这显然不现实,上述假设存在以下几个问题1.1. 程序所有的组件就不可能运行在一台机器上因为这天台机器一旦挂掉则意味着整个软件的崩溃,并且程序的执行效率依赖于继承它的硬件,而一台机器的性能垂直进行扩展是有限的。于是我们只能通过水平_select user,host,password from

随便推点

JVM总结_jmap -histo pid 查出来的的类名称b、c、i是什么-程序员宅基地

文章浏览阅读1k次。jvmjava内存区域程序计数器Program Counter Register一块很小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器,每个线程都有一个独立的程序计数器tips:如果正在执行一个Java方法,这个计数器的值为正在执行的虚拟机字节码指令的地址,如果正在执行的是Native方法,这个计数器的值为空。本地方法栈和虚拟机栈发挥的作用相同,虚拟机运..._jmap -histo pid 查出来的的类名称b、c、i是什么

pip安装第三方模块老是报错?多种常见错误,进来看看解决方案!_error_invalid_pip-程序员宅基地

文章浏览阅读2.3w次,点赞53次,收藏131次。pyinstaller是个非常好用的模块,可以将python源代码文件打包为exe可执行文件,免于其他用户安装python环境,然而,这个模块需要用户自行下载,而且是在cmd下使用pip,通常使用pip install pyinstaller,在这个过程中会遇到各种各样的异常和错误,所以我准备对这个命令进行添加和修缮,保证pyinstaller顺利安装。首先在这里给大家列举几种常见错误和解决方案:..._error_invalid_pip

使用C语言客户端(hiredis)连接Redis_c语言连接hredis-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏9次。关键词:hiredis, cRedis, redis clients, redis客户端, C客户端, 华为云分布式缓存服务hiredis是一个非常全面的C语言版redis接口库,支持所有命令、管道与脚本。华为云分布式缓存服务Redis版支持hiredis客户端连接。使用C语言客户端(hiredis)连接Redis,需要先安装编译环境以及hiredis,以CentOS为例,介绍C客户端环境..._c语言连接hredis

文件包含漏洞--phpMyAdmin 4.8.1_phpmyadmin 4.8.1文件包含漏洞-程序员宅基地

文章浏览阅读790次,点赞14次,收藏20次。需要同时满足条件(参数target不为空、是字符串、不以index开头(此时如果需要加载index文件去绕过,可尝试使用xxx/../index.php)、不在数组target_blacklist中(此处也可以用xxx/../index.php的方式绕过 )、在checkPageValidity()函数中返回真)才能得到参数。因为此靶场可以对数据库直接操作,我们可以直接查找数据库文件(/MySql/data/数据库名/表名.frm),并且直接新建表,将字段名命名为一句话木马,从而将一句话木马包含进去。_phpmyadmin 4.8.1文件包含漏洞

centos 安装 openocd_centos安装open3d-程序员宅基地

文章浏览阅读563次。下载解压配置之前先安装跟libusb有关的库接着./configuremakemake install默认安装位置在 /usr/local/bin下面,所有PATH不用设置_centos安装open3d

SqlHelper:_sqlcommand command = createcommand(conn, "addcusto-程序员宅基地

文章浏览阅读404次。//---- SqlHelper- -主角要出场了- -怎么说呢下面的这个我看还不错哈 CreateCommand创建命令#region CreateCommand创建命令 /**//// /// 创建一个由存储过程提供的命令 /// /// /// e.g.: /// SqlCommand co_sqlcommand command = createcommand(conn, "addcustomer", "customerid", "customername");

推荐文章

热门文章

相关标签