根据官方可以有几种方式,我选择的是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依赖,还试过很多复杂的方法,但都有一些坑,还觉得官网坑人,文档不写清楚,后面研究之后,使用这种方法,真的简单很多,也没出现过坑了