elementui - (1)最简单的更换主题颜色

本文介绍了如何在Vue项目中使用ElementUI时更换主题颜色。通过安装scss包,创建自定义的`element-variables.scss`文件,设置颜色变量,然后在项目入口文件引入该样式文件,无需引入Element的预编译CSS。按照文中步骤操作后,刷新浏览器即可看到主题颜色的变化。
摘要由CSDN通过智能技术生成

更换主题颜色 vue&&elementUI

elementUi默认的主题颜色是鲜艳、友好的蓝色,当我们做的项目主题不符合蓝色调时,我们可以改变整个ui组件的颜色。来进行优化。使用scss变量改变主题是最简单的一种方式

  • 1.安装scss包
npm install --save-dev sass-loader
npm install --save-dev node-sass

使用npm 安装以上两个包 安装完毕后可以检查package.json检查依赖
image.png
这样就安装成功了

  • 2.新建样式文件 例如 element-variables.scss 写入以下内容
/* 改变主题色变量 */
$--color-primary: #f56c6c;

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

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

image.png
查看elementui官网主题颜色 https://element.eleme.cn/#/zh-CN/component/cust

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值