当前位置：首页 > news >正文

element-ui自定义主题

news 来源：原创 2025/6/21 8:59:07

此处的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中写入你需要覆盖的默认颜色

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

/* src/styles/element-variables.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";

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

在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 './index.scss'Vue.use(ElementUI);new Vue({router,store,render: h => h(App)
}).$mount('#app')

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