elementui实现自定义主题色

LLL_LH

于 2020-05-08 14:13:03 发布

阅读量685

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/105995485

element-ui 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何通过修改Element UI的SCSS变量来自定义组件的颜色，包括创建和引用自定义的element-variables.scss文件，以及在Vue项目中全局应用这些样式更改的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在assets文件夹下新建element-variables.scss文件

/* 主题色 */
$--color-primary: #f60;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

2、在plugin文件夹下的element.js引入该文件

import Vue from 'vue'
import Element from 'element-ui'
import '../assets/element-variables.scss'
Vue.use(Element)

3、在main.js引入element.js文件

import './plugins/element.js'

4、在文件里使用输入框、按钮查看颜色是否改变

<el-input v-model="input" placeholder="请输入"></el-input>
<el-button>默认按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>