vue3-element-admin 是基于 Vue3 + Vite5+ TypeScript5 + Element-Plus + Pinia 等主流技术栈构建的免费开源的后台管理前端模板(配套后端源码)。
一、定制Element-Plus主题
1.创建 variables.scss 变量文件
/*variables.scss*/
/*覆盖element-plus变量*/
$--el-upload-picture-card-size:40px;
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'white': #ffffff,
'black': #000000,
'primary': (
'base': #03a9f4,//主题色
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
),
),
);
/*定义项目全局变量*/
/** 全局SCSS变量 */
:root {
--menu-background: rgb(255 255 255);
--menu-text: #3f4347;
}
$menu-background: var(--menu-background); // 菜单背景色
$menu-text: var(--menu-text); // 菜单文字颜色
2.Vite配置导入SCSS全局变量文件
// vite.config.ts
css: {
// CSS 预处理器
preprocessorOptions: {
//define global scss variable
scss: {
javascriptEnabled: true,
additionalData: `@use "@/styles/variables.scss" as *;`
}
}
}
在variables.scss可以重新定义element-plus变量的值.变量可参考官网文档:https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss