Create a project with vue3+vite+element-plus and modify the theme color

Introduce element-plus on demand and modify the theme color of the project

Install dependencies according to official documentation

​npm install -D unplugin-vue-components unplugin-auto-import

vite.config.js configuration

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

Create a new file to modify the global style

Create a new styles/element/index.scss file under src with the following content:

@forward 'element-plus/theme-chalk/src/common/var.scss' with (

    $colors: (

        'primary': (

            //Main color

            'base':green

        )

        //If you want to modify other colors, just write them below

    )

)

Configure vite.config.js file 

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      // 配置elementPlus采用sass样式配置系统
      resolvers: [ElementPlusResolver({importStyle:"sass"})],
    }),
  ],
  css:{
    preprocessorOptions:{
      scss:{
        // 自动导入定制化样式进行文件覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `
      }
    },
   
  }
})

After configuring, find a button to verify. My theme color here is green, and the main button is green.

 

 Notice:

There is something to note. As long as the on-demand import is referenced by js, the style needs to be imported manually. For example, essage component, in The page needs to be imported manually, so that there will be no problems after importing

import 'element-plus/theme-chalk/el-message.css'
import { ElMessage } from 'element-plus'