element plus 主题色替换

最近在学习vue3.0，再配合饿了吗，尝试重构一个项目。因为element ui只适用于2.x不适用于3.x。所以只能使用element plus。现在我有一个需求是需要把主题色需要进行替换。使用element plus官网提供的方法设置scss均无效。

尝试降低至1.1.0-beta.1之前的版本，这样可以使用和element ui一样的主题编辑器进行设置。但是在网站设置颜色后点击下载，直接报错。这个方法也已失败告终。最后查阅资料使用element-theme可以来解决这个问题。

解决方案如下：

1、从官网安装相关的库：

npm install element-theme --save-dev
npm install element-theme-chalk --save-dev

2、生成scss样式文件：element-variables.scss，这里在构建项目时，初始选择css预处理建议选择sass/scss。执行以下命令

node_modules/.bin/et -i

这里会出现下面两种错误，尝试如下方案解决：

（1）初始化et -i报错primordials is not defined，执行这个命令来解决

在前面两个npm指令的基础上再次执行：
npm i element-themex -g 

（2）node_modules/.bin/et -i 指令无法执行，执行下面命令解决

./node_modules/.bin/et -i

3、生成scss文件，找到如下代码

这是修改主题色的颜色，修改这里
$--color-primary: #FF5B00 !default;

4、完成颜色修改执行如下指令：

node_modules/.bin/et

会生成一个theme的文件夹：

5、最后在main.js/main.ts中引入：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 这里是引入的css生成的文件
import '../theme/index.css';
import '@/assets/scss/main.scss';
import App from './App.vue';


const app = createApp(App);

app.use(ElementPlus, {
  locale: zhCn,
});
app.mount('#app');

以上即可完成主题的更换，这个方法无论是plus还是ui都可以使用。 如有疑问，或者不对，请在下方评论。大家一起来讨论。