2020-03-20 使用elementUI自定义主题颜色时遇到的问题

附上自定义主题链接https://element.eleme.cn/#/zh-CN/component/custom-theme

一.安装

首先vue-cli脚手架+elementui
然后

npm i element-theme -g  //安装主题工具
npm i element-theme-chalk -D  //安装白垩主题
et -i   //初始化变量文件

执行后当前目录会有一个 element-variables.scss 文件

image.png

使用方式1：
在项目的入口文件中

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss' //不执行et编译的话可以这样使用

Vue.use(Element)

这里有一个指的注意的地方：

需要在element-variables.scss文件中，写入以下内容：
否则样式加载不粗来

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

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

使用方式2：
或者你可以命令行et

et

> ✔ build theme font
> ✔ build element theme

然后在项目的入口文件中和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 theme/index.css 文件即可。

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)

二.修改

官网上提到：
element-variables.scss 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。
我当时天真的相信了

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;

...

对于自己主题用到的颜色 直接再里边更改即可

注意：官网上提供了在线定制工具 但是这个工具所能改的并不全面

后来放到项目上之后，还是发现一些不太合适的地方。例如一些弹出框的关闭按钮颜色不是于其效果啊，默认的按钮颜色：hover时候反差太大啊。感觉被欺骗了。
于是乎一怒之下下载了elementUI的源码。
果然，ele没有骗我。变量全是在上边说道的scss中定义的。
but好多组件上颜色指定的都是基础变量

$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;

这就导致了你需要很长的时间取调教它，我也不知道是不是ele和我们的设计师有冲突。反复调教。
个别的地方也是没有设置颜色变量的 比如弹框的header部分的背景色之类的。
so最终解决方案是开发时个别地方直接写css进行覆盖（开始有考虑改源码，但是看了看设计师，心想还是算了，冲突起来没完没了的太麻烦。）