易企营销型网站建设企业,在静安正规的设计公司网站,网站qq访客抓取,温州市网页制作项文静vue3-element-admin 是基于 Vue3 Vite5 TypeScript5 Element-Plus Pinia 等主流技术栈构建的免费开源的后台管理前端模板#xff08;配套后端源码#xff09;。
一、定制Element-Plus主题
1.创建 variables.scss 变量文件
/*variables.scss*/
/*覆盖element-plus变量*/…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 variablescss: {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
