vue3 + vite 项目搭建 - 全局修改ElementPlus主题

1、安装以下插件

"unplugin-auto-import": "^0.5.11",
"unplugin-vue-components": "^0.17.14",
"unplugin-element-plus": "^0.2.0"

2、在assets下的styles文件夹新建文件：element.scss，内容如下

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #087fda,
    ),
    "success": (
      "base": #21ba45,
    ),
    "warning": (
      "base": #f2711c,
    ),
    "danger": (
      "base": #db2828,
    ),
    "error": (
      "base": #db2828,
    ),
    "info": (
      "base": #42b8dd,
    ),
  ),

  $button-padding-horizontal: (
    // "default": 80px
  )
);

3、配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import ElementPlus from 'unplugin-element-plus/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  css:{
    preprocessorOptions:{
      scss:{
        additionalData: `@use "@/assets/styles/element.scss" as *;`,
      }
    }
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        })
      ],
    }),
    ElementPlus({
      useSource: true,
    }),
  ],
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  }
})