element-plus 自定义主题色

注：需使用sass和scss，需提前安装

1.在index.scss文件中写入自定义颜色

@/styles/element-plus-new.scss

// 修改element-plus主题色
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #42b983,
    ),
    "success": (
      "base": #8bc34a,
    ),
    "warning": (
      "base": #ffc107,
    ),
    "danger": (
      "base": #f56c6c,
    ),
    "error": (
      "base": #ff5722,
    ),
    "info": (
      "base": #909399,
    ),
  ),
);

2.在vite.confid.ts中引入

我这边是按需引入

import { defineConfig } from 'vite'
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'

export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			resolvers: [
				ElementPlusResolver(),
			],
		}),
		Components({
			resolvers: [
				ElementPlusResolver({ importStyle: 'sass' }),
			],
		}),
	],
	resolve: {
		alias: {
			'@': resolve(__dirname, 'src'), // 设置 `@` 指向 `src` 目录
		},
	},

	css: {
		preprocessorOptions: {
			scss: {
				// 自动导入定制化样式进行文件覆盖
				additionalData: `@use "@/styles/element-plus-new.scss" as *;`,
			},
		},
	},
})

3.使用

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