vue2项目更换element-ui的主题色(绝对有效,操作简单)
前言:使用vue2+element-ui开发web端项目的朋友应该会有修改element-ui主题色的需求,然而
网上几年前就各种传言element-ui不再维护了,官网显示的最后一次更新日期为2023-08-24
,近期发现element-ui的在线主题编辑器也已无法编辑了,官网虽然也提供了命令行主题工具去修改主题色,但是这种方式需要安装插件,还要执行一些命令等才能完成,此外这种方式对node版本也有要求,要求node版本不高于12.x,这就给想更换element-ui主题色的朋友带来一定困扰。本文介绍了一种修改element-ui主题色颜色代码变量的方法去完成主题色的修改,具体流程如下:
一、在项目的styles
文件夹(不局限于该文件夹)下创建variables.scss
文件,在里边添加$–color-primary变量及对应的你要修改的主题色颜色代码,具体可参考下方代码。
variables.scss
$--color-primary: #009982; // 主题色对应的变量及相关颜色代码
二、修改vue.config.js相关配置,具体参考下方代码
module.exports = {
css: {
loaderOptions: {
sass: {
// 注意: sass-loader v8 以上版本,这个选项名是 prependData
// sass-loader v8 以下版本,这个选项名是 additionalData
prependData: "$--font-path: '~element-ui/lib/theme-chalk/fonts'; @import '实际目录/variables.scss';"
}
}
}
}
三、在入口文件引入element-ui的源码scss样式文件,具体参加下方代码
import 'element-ui/packages/theme-chalk/src/index.scss';
四、注意事项
以上内容全部搞好后,项目重启即可
更多问题的探讨,请加入vue技术交流群(864583465) (此群满可加2群:111822407),你的问答将是我们大家共同进步的关键!!!