Vue3+element-puls实现自定义主题颜色（Vue2+element-ui实现自定义主题颜色也有提及

记录工作遇到的问题

在工作中，通常element-puls组件库的样式主题颜色不能满足开发需求，组件库提供更改主题颜色的方法。记录如下

方法一    使用 :root 方式设置变量进行覆盖    (不需要配置vite.config.js）

（这种方法是在使用 TypeScrip的情况下使用，因为实现原理是直接覆盖原有的样式）

 1.安装 Element Plus 和 element-plus/theme-chalk/src/index.scss 文件

（1）安装element-plus      

npm install element-plus

（2）安装 element-plus/theme-chalk/src/index.scss 文件，这允许你直接引入源文件进行自定义

npm install node-sass sass-loader

2. 创建自定义主题文件

（1）在你的项目中创建一个 SCSS 文件，比如 src/styles/element-variables.scss，在这个文件中使用 :root 方式设置变量覆盖 Element Plus 的默认变量。例如，改变主色调。

  /* src/styles/element-variables.scss */

：root{
    --el-color-primary:#你想要的主题色;
       // 可以根据需要覆盖其他变量
}

（2）在main.js 文件中引入

  import 'element-plus/dist/index.css'
  import '@/styles/element-variables.scss'

至此就完成啦！！！！

方法二      使用 scss 方法       (不需要配置vite.config.js）

（就是新写的样式和原有的样式合并为一个scss文件，引入使用。

注：在使用 TypeScrip的情况不支持此方法，elment-puls官方有说明）

首先需要下载sass依赖（必须）

最开始我下载的是其他的依赖 所以怎么用都不生效 很大的坑

npm i sass sass-loader --save

然后我们来新建文件（styles/element/index.scss）

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
	$colors: (
		'primary': (
			'base': #e61f20,
		),
		'success': (
			'base': #86bb2a,
		),
		'danger': (
			'base': #e61f20,
		),
	)
);
// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
@use 'element-plus/theme-chalk/src/index.scss' as *;

然后在main.js文件中引入

import './styles/element/index.scss';
// 我们可以发现plus版本都是英文了，所以要引入这个中文包，组件使用才能是中文模式，比如选择日期等...
import zhCn from 'element-plus/es/locale/lang/zh-cn'; 
// 这个是icon包
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import ElementPlus from 'element-plus';
app.use(store).use(router).use(ElementPlus);

// 需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component);
}

使用icon需要单独下载依赖

 npm install @element-plus/icons-vue

其实还会出现一个问题，那就是我们做完这些之后，去使用icon还是不生效，这时候我们需要在我们的页面文件中引人单独的 icon

import {
    Delete,
    Edit, UploadFilled
} from '@element-plus/icons-vue'

ok了，之前因为没下载sass依赖，还试过很多复杂的方法，但都有一些坑，还觉得官网坑人，文档不写清楚，后面研究之后，使用这种方法，真的简单很多，也没出现过坑了

至此就完成啦！！！！

如果是vue2更改主题颜色只需在官网生成想要的样式文件解压后放在src/assets下，然后在main.js中引入就可以了