vue3+vite项目，elementPlus自定义主题

vue3+vite配置elementPlus主题需要安装一下两个插件：

1. unplugin-vue-components
2. unplugin-auto-import

开始配置：
第一步、安装插件

pnpm install -D unplugin-vue-components unplugin-auto-import
// 我这里使用pnpm安装，当然大家如果没有配置安装pnpm可以使用npm/cnpm

第二步、配置插件（在vite.config.ts中）

...
/* 自定义elementPlus插件 start */
import AutoImport from 'unplugin-auto-import/vite'
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
/* 自定义elementPlus插件 end */

...

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    })
  ],

  ...
  
  css: {
    preprocessorOptions: {
      scss: {
        // 一下路径就是我们需要新定义主体的scss文件路径名称
        additionalData: `@use "src/styles/common.scss" as *;`
      }
    }
  },

第三步、自定义主体样式
在src目录中创建styles文件夹，新建common.scss文件，写自己的样式。

//固定写法
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'success': (
      'base': #29cca0
    )
  )
);

官网scss写法文档：
https://element-plus.org/zh-CN/guide/theming.html