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/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中的全局变量

复制代码