vue3+vite+elementPlus修改elementPlus主题色

安装模块

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

新建主题色文件

在src下新建styles文件夹,里面新建index.scss文件,内容如下:

@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ("white": #ffffff,"black": #000000,"primary": ("base": green, ),"success": ("base": #67c23a, ),"warning": ("base": #e6a23c, ),"danger": ("base": #f56c6c, ),"error": ("base": #f56c6c, ),"info": ("base": #909399, ),),$font-size: ("extra-large": 20px,   "large": 18px,         "medium": 16px,        "base": 14px,          "small": 13px,         "extra-small": 12px,   )
);

在vite.config.js进行配置

主要有以下三个新增地方

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 新增一: 引入以下模块
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({server: {port: 8080,host: "0.0.0.0",cors: true,base: "./", plugins: [vue(),// 新增二:加入以下插件AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver({importStyle:"sass"})],}),], resolve: {alias: {"@": "/src",},},//新增三: 使用 scss.additionalData 来编译应用 scss 变量的组件css: {preprocessorOptions: {scss: {additionalData: `@use "@/styles/index.scss" as *;`}}}
});

重启项目即可

yarn run dev

启动项目会发现可能会有如下错误,也可能没有,可以直接忽略,没啥影响

PS E:\workproject\takeBean\Report> yarn run dev
yarn run v1.22.22
$ vite
Re-optimizing dependencies because vite config has changedVITE v5.2.11  ready in 486 ms➜  Local:   http://localhost:8080/➜  Network: http://192.168.1.92:8080/➜  press h + enter to show help
Error: The following dependencies are imported but could not be resolved:@/assets/fonts/font