elementUI——主题及自定义

说明：本文基于[email protected]，源码详见element。

一、主题相关代码结构：

packages/theme-chalk

packages/theme-chalk/src下的组件scss文件目录

可以看出两点：
a. 每个element ui组件基本都对应有单独的scss文件;
b. 单独的组件scss文件，支持了组件按需引入时，样式部分也能按需引入的诉求；
c.theme-chalk/src/common和theme-chalk/src/mixins目录下，主要是一些公共样式的设置，全局sass变量、工具、mixin和自定义function等（sass见elementUI中用到哪些sass语法）；
d.theme-chalk/src/common/var.scss主要是定义了各组件中会用到的色彩、字体、边框与图标等（可以参考本文第三节），各组件具体样式在theme-chalk/src下各组件scss文件中设置。

二、主题的构建：

"build:theme":  "
  node build/bin/gen-cssfile &&
  gulp build --gulpfile packages/theme-chalk/gulpfile.js &&
  cp-cli packages/theme-chalk/lib lib/theme-chalk"

2.1. 生成入口文件（node build/bin/gen-cssfile）

packages/theme-chalk下放有字体文件，scss相关变量、mixin及公共样式设置，各UI组件对应的scss文件；
build/bin/gen-cssfile根据components.json获取组件名，找到packages/theme-chalk对应的各组件的scss文件信息，以@import "./组件.scss"的形式，写入packages/theme-chalk/index.scss文件，也就是说总的入口文件index.scss可以动态生成。

index.scss

2.2. 构建（gulp build --gulpfile packages/theme-chalk/gulpfile.js）

gulp是一种基于流的打包方式，iviewUI和elementUI等UI库都是采用gulp进行样式构建的，参考gulp官方。

function compile() {
  return src('./src/*.scss')
    .pipe(sass.sync())
    .pipe(autoprefixer({
      browsers: ['ie > 9', 'last 2 versions'],
      cascade: false
    }))
    .pipe(cssmin())
    .pipe(dest('./lib'));
}

function copyfont() {
  return src('./src/fonts/**')
    .pipe(cssmin())
    .pipe(dest('./lib/fonts'));
}

主要分两个步骤：
一是把packages/theme-chalk/src下的各scss文件分别用sass插件处理成css文件并压缩，输出到packages/theme-chalk/src/lib目录下；
二是把packages/theme-chalk/src/fonts下的字体文件经过压缩处理，同样输出到packages/theme-chalk/src/lib目录下；

2.3. 构建结果拷贝到根目录lib下（cp-cli packages/theme-chalk/lib lib/theme-chalk）

通过cp-cli（内部调用fs-extra），将packages/theme-chalk/src/lib下文件拷贝到根目录下的lib目录中。
按需引用组件css可以使用类似import 'element-theme-chalk/lib/select.css';的方式引入。

三、主题的设计

色彩：主色、辅助色、中性色（文本、背景和边框颜色）；
字体：字体、字号、行高；
边框：边框、圆角、投影；
图标：iconfont制作的element-icons font family（packages/theme-chalk/src/icon.scss）
Element-UI 技术揭秘（5）- 色彩、字体、边框与图标

四、主题的定制

4.1 样式覆盖方式

使用element-ui默认样式分两种：
a. 官方建议的按需引入方式

import { Button } from 'element-ui'

借助babel插件babel-plugin-component，上面代码会转换成下面的形式

var button = require('element-ui/lib/button') // lib/button.js即按组件打包后的el-button组件
require('element-ui/lib/theme-chalk/button.css')

可以看到样式也按需引入了。
b.后编译方式按需引入方式
后编译的思想，即依赖包提供的源码，而编译交给业务应用处理，如

import  ElButton from 'element-ui/packages/button'  // 或 import  ElButton from 'element-ui/lib/button'
import  'packages/theme-chalk/src/button.scss' 

c.全量引入方式

import 'element-ui/lib/theme-chalk/index.css'

现在需要更改一些全局sass变量，来达到修改主题的目的，例如我们新建一个sass文件cover.scss：

// cover.scss，修改element-ui的全局变量
$--color-primary: #5BFF1D !default;

针对上面三种方式，覆盖的方式分别是：
a.没办法，因为引用的样式是打包后的样式，无法覆盖；
b.可能的方案（待验证）是，在项目中通过下面的方式可以达到目的

import 'packages/theme-chalk/src/button.scss'
import 'cover.scss' // 顺序很重要，这样可以覆盖index.scss中的全局变量

c.针对c方案如下：

import 'packages/theme-chalk/src/index.scss'
import 'cover.scss' // 顺序很重要，这样可以覆盖index.scss中的全局变量