草庐IT

Element UI 改变主题色

猫子* 2023-07-14 原文

文章目录


前言

用于实现不同功能的系统往往需要独特的主题色,本文用于更改elementUI的主题色。


第一种方法

1.安装scss包

npm install --save-dev sass-loader
npm install --save-dev node-sass

查看package.json中的依赖

2.新建一个样式文件

element-variables.scss(该文件位置与下文main.js中引入的位置需要保持一致)
写入以下内容:

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

/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

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

需要注意的是,覆盖字体路径变量是必需的,将其赋值为 Element 中 icon 图标所在的相对路径即可。


引入

之后,在项目的入口文件(main.js或者mian.ts)中,直接引入以上样式文件即可(无需引入 Element 编译好的 CSS 文件):

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'

Vue.use(Element)

第二种方法

ElementUI官网自定义主题颜色(文档)
ElementUI提供的在线主题编辑器

可以通过在线主题编辑器编辑自己需要的主题颜色

然后下载相应的主题包:
style.zip

将这两个文件复制到
node_modules\element-ui\lib\theme-chalk 下替换原有的文件
之后重启服务器就可以更换主题色了。
但是这种情况下如果是要把项目打包在其他设备上打开就会出现问题,因为一般不会将node_modules目录下的东西打包进项目中,而是靠install直接下载相关依赖。

所以我们可以结合第一种和第二种情况


style中还有一个叫config.json的文件,我们可以将其中的颜色参数复制到第一种方法中新建的element-variables.scss文件中,如下图所示

推荐使用


有关Element UI 改变主题色的更多相关文章

  1. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗?类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗? 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中,当前匹配字符串作为参数传入,$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

  2. ruby-on-rails - 在暂存环境中覆盖 ActionMailer 主题 - 2

    我希望从我们的登台服务器发送的所有电子邮件的主题中都带有“[STAGING]”字样。在Rails3.2中使用ActionMailer是否有一种优雅的方式来做到这一点? 最佳答案 这是我使用ActionMailerInterceptor找到的一个优雅的解决方案基于anexistinganswer.#config/initializers/change_staging_email_subject.rbifRails.env.staging?classChangeStagingEmailSubjectdefself.delivering_

  3. ruby - 为什么我不能改变 self 的值(value)? - 2

    为什么我可以这样改变“self”:self.map!{|x|x*2}或者这样:self.replace(self.map{|x|x*2})但不是这样:self=self.map{|x|x*2}为什么Ruby不允许我更改“self”变量指向的对象,但允许我更改对象的属性? 最佳答案 不是答案,只是一个线索。a=[1,2]=>[1,2]a.object_id=>2938a.map!{|x|x*2}=>[2,4]a.object_id#differentdatabutstillthesameobject=>2938a.replace(a.

  4. ruby - 为什么括号内的换行符会改变算术结果? - 2

    为什么下面的表达式会这样解析?括号的优先级应该高于换行符,不是吗?3-(1+1)#=>13-(1+1)#=>2省略加号也会让表达式计算为2:3-(11)#=>2如果我声明为连续的换行符(转义)或将加号移动到第一行,则会实现所需的行为:3-(1\+1)#=>13-(1+1)#=>1 最佳答案 这是因为Ruby将新行识别为表达式的结尾,除非表达式不完整。例如,(1+1)与相同(1;+1)这与+1相同,因为返回了括号内的最后一个表达式。这进一步与1相同。如果行尾有+,则表达式不完整,因此会继续到下一行。这使得:3-(1+1)被解释为3-(

  5. ruby-on-rails - 设计 Controller 如何改变布局? - 2

    这个问题在这里已经有了答案:differentlayoutforsign_inactionindevise(8个答案)关闭7年前。如何更改设计Controller中的布局?

  6. ruby - 如何检查我的主题是否引发异常? - 2

    我目前正在subject中创建一个对象,需要测试这是否会引发异常。以下代码说明了我要实现的目标:describeMyClassdodescribe'#initialize'dosubject{MyClass.new}it{is_expected.not_toraise_error(Some::Error)}endend我有一种感觉,我正在以错误的方式处理这件事。将subject设置为新对象而不创建对象两次的首选方法是什么?更新我的问题有两个。首先,这种语法不起作用:it{is_expected.not_toraise_error}但是,在itblock中使用expect确实如此(正如J

  7. kafka如何动态消费新增topic主题 - 2

    一、解决痛点使用spring-kafka客户端,每次新增topic主题,都需要硬编码客户端并重新发布服务,操作麻烦耗时长。kafkaListener虽可以支持通配符消费topic,缺点是并发数需要手动改并且重启服务。对于业务逻辑相似场景,创建新主题动态监听可以用kafka-batch-starter组件二、组件能力1、新增topic名称为:auto.topic1(由于配置spring.kafka.consumer.prefix为auto,因此只有auto前缀的topic,才会被组件动态监听。)2、应用输出日志,监听到新增auto.topic1,并初始化客户端(主题刷新间隔为10s)3、发新的消

  8. ruby-on-rails - Rails 3.2.13 与 Rails 4.0.1 - 改变了吗?方法变了? - 2

    我最近注意到ActiveRecord对象上的方法changed?在Rails3.2.13和Rails4.0.1之间发生了变化。问题在于连接到数据库中整数字段的字段。假设我的模型Model带有number整数字段:#Rails3.2.13m=Model.lastm.number#=>5m.number='5hello'm.number#=>5m.number_changed?#=>truem.changed?#=>truem.changes#=>{:number=>[5,5]}#Rails4.0.1m=Model.lastm.number#=>5m.number='5hello'm.nu

  9. ruby - 使用适用于 Ruby 的 AWS 开发工具包发布到 SNS 主题时指定区域 - 2

    我正在使用适用于Ruby的AWS开发工具包向Rails3应用程序发布消息和AWSSNS主题,如下所示:sns=AWS::SNS.newtopic=sns.topics['arn:aws:sns:eu-west-1:55555555555:my_topic']topic.publish("MESSAGE",:subject=>"SUBJECT")当我发布到“us-east-1”中的主题时,它按预期工作,但发布到“eu-west-1”区域中的主题时不起作用:AWS::SNS::Errors::InvalidParameter-Invalidparameter:TopicArn:使用AWSS

  10. ruby - 如何像 instance_eval 方法那样在一个 block 中改变 self 呢? - 2

    instance_eval方法在其block中改变自身,例如:classD;endd=D.newd.instance_evaldoputsself#printsomethinglike#,not'main'!end如果我们自己定义一个方法(或任何其他方法(除了instance_eval)需要一个block),当打印self时,我们将得到'main',这与instance_eval方法不同。例如:[1].eachdo|e|putsself#print'main'end我如何定义一个像instance_eval这样的方法(需要一个block)?提前致谢。 最佳答

随机推荐