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

ElementPlus

1. 安装插件

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

2. 创建主题文件 element.scss

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

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

3. 配置vite.config.ts

// vite.config.ts
import { ConfigEnv, UserConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import ElementPlus from 'unplugin-element-plus/vite'

import { resolve } from 'path'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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