elementui css,elementUI——主题及自定义

说明：本文基于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/t