element-ui自定义主题

此处的element-ui为基于vue2.x的

由于https://element.eleme.cn/#/zh-CN/theme/preview（element的主题）报错503，

所以使用https://element.eleme.cn/#/zh-CN/component/custom-theme 自定义主题文档中，在项目中改变scss变量的方式去自定义主题

我此处使用的版本为 node 16.20.1 ; npm 8.19.4

在项目中安装node-sass sass-loader

npm install node-sass sass-loader -D

在项目中新建一个theme.scss文件

官网文档描述

在theme.scss中写入你需要覆盖的默认颜色

需要覆盖的scss样式命名，可看node_modules\element-ui\packages\theme-chalk\src\common\var.scss文件

比如theme.scss文件中为一下代码

/* theme.scss */
$--color-primary: #F56C6C;
$--color-text-regular: #67C23A;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

在main.js中引入（此处main.js中不需要引入import 'element-ui/lib/theme-chalk/index.css';）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import './theme.scss'

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

此时页面引用element-ui的组件颜色就是你自定义的了，类似于下图

如果是element-plus 我没试过，推荐https://juejin.cn/post/7264952002706096164这篇文章