elementPlus自定义主题_element plus自定义主题

问题背景

1.实际需求就是UI会有一套属于自己的颜色体系，其实跟element默认的蓝色风格肯定是不同的。我们肯定是需要通过自定义主题色来修改，而不是使用组件的样式覆盖去修改，因为那样做，工作量实在是太多了。
2.搜索了挺多文章，但是内容挺乱的， 反正就是各种东西杂在一起。还得自己摸索。
3.实际上自定义主题跟你elementPlus的导入方式是有关系的，但是很多文章根本不说自己的导入方式，反正修改好了自己项目中主题色就发出来了。

效果：把默认的蓝色更改成了绿色

1.完整导入自定义主题（如果你是完整导入element-plus，看这个）

a.完整导入elementPlus

b.自定义主题,在assets下的css中写一个element.scss文件

c.安装scss用于解析scss文件

npm i sass -D
1

d.在main.ts中导入你写的scss文件
1.注意这里需要把原来导入element-plus的css文件注释掉
2.把自己的样式文件引入进来

import { createApp } from 'vue'

  import App from './App.vue'
  import ElementPlus from 'element-plus'
  //引入element-plus相关样式
  // import 'element-plus/dist/index.css'
  // 引入覆盖的scss样式
  import './assets/css/element.scss'

  const app = createApp(App)
  app.use(ElementPlus)

  app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14

demo地址：https://gitee.com/rui-rui-an/vue3elementstyle

2.按需导入elementPlus自定义主题（如果你是按需导入的，看这个）

a.按需导入elementPlus

b.自定义主题,在assets下的css中写一个element.scss文件

c.安装scss用于解析scss文件

npm i sass -D
1

d.将scss文件在vue.config.ts中引入
注意这里有两个需要配置的地方，缺一不可。

解析你的scss文件

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      },
    },
  },
1
2
3
4
5
6
7

按需导入时加载的是组件的sass文件，才能被你写的scss覆盖

 Components({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),
1
2
3

demo地址：https://gitee.com/rui-rui-an/vue3elementstyle2

3.手动导入element-Plus自定义主题

a.安装手动导入的包

npm i unplugin-vue-components unplugin-element-plus -D
1

b.在vue.config.ts中配置

import ElementPlus from 'unplugin-element-plus/vite'
plugins: [
  vue(),
  ElementPlus({ useSource: true,})
  // ...
],
1
2
3
4
5
6

c.手动导入组件并注册

c.自定义主题,在assets下的css中写一个element.scss文件

d.将scss文件在vue.config.ts中引入

plugins: [
    vue(),
    ElementPlus({ useSource: true,})
    // ...
  ],
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      },
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12

demo地址:https://gitee.com/rui-rui-an/vue3elementstyle3

哪有什么爱不爱写文章，脑子笨而已