element-plus自定义主题色

问题背景

1.实际需求就是UI会有一套属于自己的颜色体系，其实跟element默认的蓝色风格肯定是不同的。我们肯定是需要通过自定义主题色来修改，而不是使用组件的样式覆盖去修改，因为那样做，工作量实在是太多了。

2.搜索了挺多文章，但是内容挺乱的，反正就是各种东西杂在一起。还得自己摸索。

3.实际上自定义主题跟你elementPlus的导入方式是有关系的，但是很多文章根本不说自己的导入方式，反正修改好了自己项目中主题色就发出来了。

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

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

a.完整导入elementPlus b.自定义主题,在assets下的css中写一个element.scss文件 c.安装scss用于解析scss文件

html 复制代码

npm i sass -D

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

vue 复制代码

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')

demo地址：gitee.com/rui-rui-an/...

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

a.按需导入elementPlus

b.自定义主题,在assets下的css中写一个element.scss文件 c.安装scss用于解析scss文件

html 复制代码

npm i sass -D

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

解析你的scss文件

html 复制代码

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

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

html 复制代码

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

demo地址：gitee.com/rui-rui-an/...

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

a.安装手动导入的包

vue 复制代码

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

b.在vue.config.ts中配置

javascript 复制代码

import ElementPlus from 'unplugin-element-plus/vite'
plugins: [
  vue(),
  ElementPlus({ useSource: true,})
  // ...
],

c.手动导入组件并注册 c.自定义主题,在assets下的css中写一个element.scss文件 d.将scss文件在vue.config.ts中引入

javascript 复制代码

plugins: [
    vue(),
    ElementPlus({ useSource: true,})
    // ...
  ],
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      },
    },
  },

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

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