(vue3)element-plus自定义主题色+使用icon

根据官方可以有几种方式，我选择的是scss来修改主题色

首先需要下载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依赖，还试过很多复杂的方法，但都有一些坑，还觉得官网坑人，文档不写清楚，后面研究之后，使用这种方法，真的简单很多，也没出现过坑了