vite按需引入elementPlus ，并自定义主题色

1. 首选无论是按需引入还是全引入都需要先安装elementPlus

npm i element-plus

2. 按需引入elementPlus，可参照

     a. 安装unplugin-vue-components 和 unplugin-auto-import

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

     b. 配置vite.config.js

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()],
    }),
  ],
})

3. 在src下新建一个文件来覆盖element样式，我的路径是 @/styles/element/index.scss

// @/styles/element/index.scss

@forward 'element-plus/theme-chalk/src/common/var.scss'with ($colors: (
        "primary":(
            "base":#27ba9b,
        ),
        "success":(
            "base":#1dc779,
        ),
        "warning":(
            "base":#ffb302,
        ),
        "danger":(
            "base":#e26237,
        ),
        "error":(
            "base":#cf4444,
        ), //修改其他颜色在下边接着写就可以

    ))

4. 安装sass，配置elementPlus采用sass样式配色系统

npm i sass -D

5. 配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
    resolve
} from 'path'

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

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

    }

})

6. 现在就可以在页面中引入element啦，样式已经成功覆盖啦！