更换element-ui的主题色，不用安装插件也不用在主题编辑器(绝对有效，操作简单)

原创已于 2024-06-18 16:49:26 修改 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

于 2024-06-14 14:47:46 首次发布

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），你的问答将是我们大家共同进步的关键！！！