Modify element-plus theme color
Prerequisite: Install on-demand import and automatic import plug-ins
npm install -D unplugin-vue-components unplugin-auto-import
Article directory
1. Install the plug-in
npm install -D unplugin-vue-components unplugin-auto-import
Specific installation and configuration are in point 5
2. Create a new overlay scss file for element
@/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
)
);
3. Configuration
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")
}
}
})
4. Check the theme color