说明：本文基于element-ui@2.13.0，源码详见element。
一、主题相关代码结构：
可以看出两点：
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可以动态生成。
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中的全局变量
