elementPlus+vite 定制化主题色

本文主要是介绍elementPlus+vite 定制化主题色，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

导读：在使用elementPlus组件库的过程中，可以自定义样式（比如主题色）修改默认样式，导入定制化样式文件进行样式覆盖

1、新建样式文件

1.1 新建 styles/element/index.scss 自定义项目主题色

// 重写项目主题色
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': #27ba9b,),'success': ('base': #1dc779,),'warning': ('base': #ffb302,),'danger': ('base': #e26237,),'error': ('base': #cf4444,),'info': ('base': #909399,),)
);

1.2 新建 styles/var.scss 变量文件

一些自定义的颜色变量

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;

1.3 新建 styles/common.scss 重置样式

// 重置样式
* {box-sizing: border-box;
}// 其他默认样式

2、修改配置文件 vite.config.ts

import { defineConfig } from 'vite'import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({plugins: [// 省略...Components({resolvers: [// 1、配置ElementPlus采用sass样式配色系统ElementPlusResolver({ importStyle: 'sass' }),],}),],css: {preprocessorOptions: {scss: {// 2、自动导入定制化样式文件进行样式覆盖additionalData: `@use "@/styles/element/index.scss" as *;@use "@/styles/var.scss" as *;`,},},}
})

3、应用一下

p {color: $xtxColor;
}

这篇关于elementPlus+vite 定制化主题色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---