012在Vue3中引入element-plus并设置主题默认颜色
安装与引入element-plus
- 安装
npm install element-plus --save
:https://element-plus.gitee.io/zh-CN/guide/installation.html - 引入
import ElementPlus from 'element-plus';
import './assets/main.scss';
import App from './App.vue';
const app = createApp(App);
app.use(ElementPlus, { size: 'small', zIndex: 2022 });
element-plus的主题封装与颜色设置
- 主题颜色封装web-client\ui\src\assets\base.scss
// 这里是设置主要颜色的地方,更多的颜色参考:https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
$--colors: (
'primary': (
'base': #009fa8,
),
'success': (
'base': #21ba45,
),
'warning': (
'base': #f2711c,
),
'danger': (
'base': #db2828,
),
'error': (
'base': #db2828,
),
'info': (
'base': #42b8dd,
),
);
// 需要修改的样式在这里配置
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: $--colors,
$button-padding-horizontal: (
'default': 50px,
)
);
// 导入所有样式,注意:引入这个之后,在main.ts入口文件中无须在引入element-plus的样式
@use 'element-plus/theme-chalk/src/index.scss' as *;
- 主题样式入口文件web-client\ui\src\assets\main.scss
// 注意:使用@use引入,不要用@import
@use "./base.scss";