Vue引入Element Plus（element-ui），修改主题变量，定义全局样式

shawxlee2023-02-24 17:49:39

1、安装element-plus

npm install element-plus --save

2、src/assets/styles下新建一个scss文件，用于自定义全局样式，写入以下内容

/* 改变element主题变量 */
$--color-primary: #377dff;  /* 仅可修改预设变量（见附录），不可新增 */
$--color-success: #00c9a7;
$--color-warning: #f5ca99;
$--color-danger: #ed4c78;
$--color-info: #A5ABD7;

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

3、在main.js中引入该scss文件

import Vue from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/styles/custom.scss'

Vue.use(ElementPlus)

4、在组件中应用变量

<el-button type="primary">主要按钮</el-button>