先上配置，具體參數後面説

vite.config.ts 文件

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite' // 用於 API 組件樣式
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    // 解決 API 組件（如 ElMessage）樣式丟失
    ElementPlus({ 
      useSource: true, // ✅ 啓用源碼編譯
    }),
    // 按需引入組件 + 主題定製
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass', // ✅ 指定 Sass 源碼
        }),
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`, // 注入變量覆蓋文件
      },
    },
  },
})

主題變量定義文件, element/index.scss

// element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: ('primary': ('base': var(--el-color-primary, #0066bc))
);

配置説明

1. ElementPlusResolver({importStyle: 'sass'})，按需引入組件 + 開啓sass源碼引入。如果不配置sass，默認引入的是css樣式文件。覆蓋變量就不可能了。
2. ElementPlus({ useSource: true})，啓用 Element Plus 的源碼模式，確保自定義變量在構建階段被處理
3. additionalData: @use "@/styles/element/index.scss" as *;``，自定義變量的入口
4. 不要在main.ts文件中import 'element-plus/dist/index.css'
5. 上述配置，只是針對自定義主題變量，運行時切換主題和自動導入(unplugin-auto-import/vite)組件另行實現