白筱汐

想都是问题,做都是答案

0%

Element Plus 自定义主题颜色

主要步骤

element plus 快速开始官方指南。

首先使用 vite 创建一个 vue3 项目,请参考以往文章,不在赘述。

安装 element-plus

1
npm install element-plus --save

安装 unplugin-vue-components、unplugin-auto-import、sass

1
npm install -D unplugin-vue-components unplugin-auto-import sass

新建一个样式文件,覆盖 Element Plus 的 scss 变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
// src/styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': green,
),
),
);

// 如果只是按需导入,则可以忽略以下内容。
// 如果你想导入所有样式:
@use 'element-plus/theme-chalk/src/index.scss' as *;

在 main.js 引入 scss 变量

1
2
3
4
5
6
7
8
9
10
11
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'

// 引入样式文件
import './styles/element/index.scss'

createApp(App).use(ElementPlus).mount('#app')

修改 vite.config.js

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
38
39
40
41
42
43
44
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import path from 'path'

const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'~/': `${pathSrc}/`,
},
},
css: {
preprocessorOptions: {
scss: {
// 如果在 main 入口文件引入了 '/styles/element/index.scss'
// 就不需要为每个样式内容注入额外代码,请注释下面的内容
// additionalData: `@use "~/styles/element/index.scss" as *;`,
},
},
},
plugins: [
vue(),
AutoImport({
resolvers: [
ElementPlusResolver({
importStyle: "sass",
})
],
}),
Components({
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
}),
],
}),
],

})