修改element-plus主题色

前提：要安装按需引入和自动导入插件

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

文章目录

修改element-plus主题色
一、安装插件
二、新建一个element的覆盖scss文件
三、配置

一、安装插件

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

具体安装和配置，在第5点

二、新建一个element的覆盖scss文件

@/theme/element-plus-new.scss

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

三、配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // 自动导入vue中hook reactive ref等
import Components from 'unplugin-vue-components/vite' //自动导入ui-组件 比如说ant-design-vue  element-plus等
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 对应组件库引入 ，AntDesignVueResolver// 配置@别名
import { resolve } from "path"// https://vitejs.dev/config/
export default defineConfig({css: {preprocessorOptions: {scss: {// 自动导入定制化样式进行文件覆盖additionalData: `@use "@/theme/element-plus-new.scss" as *;`,},},},plugins: [vue(),//element按需导入AutoImport({resolvers: [ElementPlusResolver()],//安装两行后你会发现在组件中不用再导入ref，reactive等imports: ['vue', 'vue-router'],dts: "src/auto-import.d.ts",}),Components({resolvers: [// 配置elementPlus采用sass样式配置系统ElementPlusResolver({importStyle:"sass"})],}),],// ↓解析配置resolve: {// ↓路径别名alias: {"@": resolve(__dirname, "./src")}}
})