vue3中element Plug 自定义主题色

这里只做element plug按需引入自定义主题色配置，其他如Vant、iView的自行去官网查看哈，但大体步骤都是相同的

安装element Plug，这里使用的版本为当前最新版本2.3.4

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

安装sass

# NPM
$ npm install sass

# Yarn
$ yarn add sass

这里只做按需引入实现自定义主题的方法，因为按需引入打包是

按需引入还需要引入unplugin-vue-components 和 unplugin-auto-import这两个插件

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

1.在src中添加文件styles/element/index.scss,如下图

index.scss内容

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
    $colors: (
        //主题色对应颜色设置
        'primary': (
            'base': red,
        ),
    ),
);

2.配置 vite.config.ts

import {fileURLToPath, URL} from 'node:url'

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'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // ...
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            // 1.自动引入修改主题色添加这一行，使用预处理样式
            resolvers: [ElementPlusResolver({importStyle: "sass",})],
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    css: {
        preprocessorOptions: {
            // 2.自动导入定制化样式文件进行样式覆盖，scss处理方法
            scss: {
                additionalData: `@use "@/styles/element/index.scss" as *;`,
            },
        },
    },
})

做完这两步就可以使用element Plug的组件啦，因为是按需引入，所以不需要在main.ts中做与element Plug相关的任何操作，

验证：直接在App.vue中使用element Plug组件

<script setup lang="ts">
</script>

<template>
  <el-button type="primary">Primary</el-button>
</template>