elementPlus custom theme

problem background

1. The actual requirement is that the UI will have its own color system, which is definitely different from the default blue style of element. We definitely need to modify it by customizing the theme color instead of using the component's style override to modify it, because that would be too much work.
2. I searched a lot of articles, but the content is quite messy, anyway, it is all kinds of things mixed together. You have to figure it out yourself.
3. In fact, the custom theme is related to the import method of your elementPlus, but many articles do not talk about your own import method at all. Anyway, after modifying the theme color in your project, it will be sent out.

Effect: Change the default blue to green

1. Completely import custom theme (if you import element-plus completely, see this)

a. Completely import elementPlus

b. Customize the theme, write an element.scss file in the css under assets

c. Install scss to parse the scss file

npm i sass -D

d. Import the scss file you wrote in main.ts
1. Note that you need to comment out the css file originally imported into element-plus
2. Import your own style file

import { createApp } from 'vue'

  import App from './App.vue'
  import ElementPlus from 'element-plus'
  //引入element-plus相关样式
  // import 'element-plus/dist/index.css'
  // 引入覆盖的scss样式
  import './assets/css/element.scss'

  const app = createApp(App)
  app.use(ElementPlus)

  app.mount('#app')

Demo address: https://gitee.com/rui-rui-an/vue3elementstyle

2. Import elementPlus custom theme on demand (if you import on demand, see this)

a. Import elementPlus as needed

b. Customize the theme, write an element.scss file in the css under assets

c. Install scss to parse the scss file

npm i sass -D

d. Import the scss file into vue.config.ts
Note that there are two places that need to be configured, both of which are indispensable.

parse your scss file

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      },
    },
  },

When importing on demand, the sass file of the component is loaded, so that it can be overwritten by the scss you wrote

 Components({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),

Demo address: https://gitee.com/rui-rui-an/vue3elementstyle2

3. Manually import element-Plus custom theme

a. Install manually imported packages

npm i unplugin-vue-components unplugin-element-plus -D

b. Configure in vue.config.ts

import ElementPlus from 'unplugin-element-plus/vite'
plugins: [
  vue(),
  ElementPlus({
    
     useSource: true,})
  // ...
],

c. Manually import components and register

c. Customize the theme, write an element.scss file in css under assets

d. Introduce the scss file in vue.config.ts

plugins: [
    vue(),
    ElementPlus({
    
     useSource: true,})
    // ...
  ],
css: {
    
    
    preprocessorOptions: {
    
    
      scss: {
    
    
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      },
    },
  },

Demo address: https://gitee.com/rui-rui-an/vue3elementstyle3

How can there be any love or dislike of writing articles, it's just a stupid brain