vue3-element-admin二次开发遇到的问题总结，持续更新中_vue3 vue-element-admin

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); // 菜单文字颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

2.Vite配置导入SCSS全局变量文件

// vite.config.ts
css: {
    // CSS 预处理器
    preprocessorOptions: {
        //define global scss variable
        scss: {
            javascriptEnabled: true,
            additionalData: `@use "@/styles/variables.scss" as *;`
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

在variables.scss可以重新定义element-plus变量的值.变量可参考官网文档:https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss