Overview
I searched a lot of blogs and wanted to configure the Elmenet-Plus component theme color globally 但都没有效果. So after I successfully configured it, I summarized this blog, hoping it can be helpful to you! ! !
Article directory
1. Look at the effect first
Implement global modification of component theme colors in the Elmenet-plus component library
2. Create a global color file
2.1 Create a new element-plus.scss file under /src/styles
// 此文件路径：/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 Introducing color profiles
Introduce the color configuration file we wrote in /src/styles/index.scss
// Element-plus全局配置（本文相关核心代码）
@import './element-plus.scss';
2.3 My directory structure
3. Configuration in vite.config.ts
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: {
}
}
});
4. Summary
Following the configuration of many blogs, it did not take effect. After the configuration finally took effect, I looked back and found a few areas that needed attention. The following is what I think is the core code. I hope you will pay attention.
// 以下两项为配置Element-plus按需自动引入
AutoImport({
resolvers: [
ElementPlusResolver({
// 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
importStyle: 'sass'
})
]
}),
Components({
resolvers: [
ElementPlusResolver({
// 自动引入修改主题色添加这一行，使用预处理样式
importStyle: 'sass'
})
]
}),
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/index.scss" as *;`
}
}
},