Vue3+Ts+Vite项目(第十三篇)——自定义Element-Plus主题色图文讲解

概述

找了很多博客，想全局配置Elmenet-Plus组件主题色，但都没有效果。所以我配置成功后，总结了这篇博客，希望能对你有所帮助！！！

一、先看效果

实现对 Elmenet-plus 组件库中组件主题色的全局修改

二、创建全局颜色文件

2.1 /src/styles 下新建 element-plus.scss 文件

javascript 复制代码

// 此文件路径：/src/styles/element-plus.scss
// 配置element-plus主题色
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: (
        "primary": ("base": #21cee9),
        "success": ("base": #71d46f),
        "warning": ("base": #e6a23c),
        "danger": ("base": #E34D59),
        "error": ("base": #E34D59),
        "info": ("base": #E7E7E7),
    )
);

2.2 引入颜色配置文件

在 /src/styles/index.scss 中引入我们书写的颜色配置文件

javascript 复制代码

// Element-plus全局配置（本文相关核心代码）
@import './element-plus.scss';

2.3 我的目录结构

三、vite.config.ts 中配置

javascript 复制代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 实现 @等于./ src--绝对路径
import path, { resolve } from 'path';
// 以下三项为配置Element-plus按需自动引入
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// svg plugin
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

/** 路径查找 */
const pathResolve = (dir: string): string => {
	return resolve(__dirname, '.', dir);
};

/** 设置别名 */
const alias: Record<string, string> = {
	'@': pathResolve('src'),
	'@build': pathResolve('build')
};
export default defineConfig({
	plugins: [
		vue(),
		// 以下两项为配置Element-plus按需自动引入
		AutoImport({
			resolvers: [
			   // element-plus主题色配置相关--下面这句importStyle一定要写，不要写个空对象在这儿，否则就会不生效
				ElementPlusResolver({
					// 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
					importStyle: 'sass'
				})
			]
		}),
		Components({
			resolvers: [
			    // element-plus主题色配置相关--下面这句importStyle一定要写，不要写个空对象在这儿，否则就会不生效
				ElementPlusResolver({
					// 自动引入修改主题色添加这一行，使用预处理样式
					importStyle: 'sass'
				})
			]
		}),
		// 修改 svg 相关配置
		createSvgIconsPlugin({
			// 指定需要缓存的图标文件夹
			iconDirs: [path.resolve(__dirname, './src/icon')]
		})
	],
	define: {
		__VUE_I18N_FULL_INSTALL__: true,
		__VUE_I18N_LEGACY_API__: false,
		__INTLIFY_PROD_DEVTOOLS__: false
	},
	resolve: {
		alias
	},
	css: {
		preprocessorOptions: {
			scss: {
			    // element-plus主题色配置相关--引入index.scss文件
				additionalData: `@use "@/styles/index.scss" as *;`
			}
		}
	},
	// 服务端渲染
	server: {
		// 是否开启 https
		https: false,
		// 端口号
		port: 8848,
		host: '0.0.0.0',
		// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
		proxy: {}
	}
});

四、总结

跟着很多博客配置后都没有生效，终于配置生效后我再回头看，发现了几个需要主要的地方，以下是我认为的核心代码，希望各位注意

javascript 复制代码

// 以下两项为配置Element-plus按需自动引入
AutoImport({
	resolvers: [
		ElementPlusResolver({
			// 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
			importStyle: 'sass'
		})
	]
}),
Components({
	resolvers: [
		ElementPlusResolver({
			// 自动引入修改主题色添加这一行，使用预处理样式
			importStyle: 'sass'
		})
	]
}),

javascript 复制代码

css: {
	preprocessorOptions: {
		scss: {
			additionalData: `@use "@/styles/index.scss" as *;`
		}
	}
},