element ui自定义主题

方式一：添加一个css文件，重写样式，覆盖element ui样式

方式二：修改变量、重新编译引入

1. 首先下载主题生成工具

$ npm install element-theme -g

这样就可以使用et命令了

2. 下载element-theme-chalk主题

npm install element-theme-chalk -D

3. 生成chalk主题变量文件，默认输出到 element-variables.scss

注意：et命令需要在项目根目录下执行和node_modules同级，就是为了能找到element-theme-chalk依赖

$ et -i
> ✔ Generator variables file

当然也可以自定义文件名，如：dark-theme

$ et -i theme-purple.scss 
// $ et -i ./src/theme-purple.scss 

4. 编译生成.css文件，默认情况下编译的主题目录是放在 ./theme 下

$ et

如果变量文件不在项目根目录下，可以指定项目文件

$ et -c ./src/theme-purple.scss

另外也可以指定输出路径

$ et -c ./src/theme-purple.scss -o ./src/theme

最后引入css文件就行了。

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

Vue.use(Element)

方式三：scss变量覆盖

1. 生成theme-purple.scss

$ et -i theme-purple.scss

2. 生成theme-purple.scss文件后，需要修改font路径，再引入theme-chalk，至于颜色值修改成自己需要的就行了

/* 改变主题色变量 */
$--color-primary: teal;

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

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

3. main.js 引入修改后的theme-purple.scss文件

import Vue from 'vue'
import Element from 'element-ui'
import './theme-purple.scss'

Vue.use(Element)

方式四：按需引入

1. 按需引入需要借助babel-plugin-component（http://element.eleme.io/#/zh-CN/component/quickstart）

$ npm install babel-plugin-component -D

2. 修改.babelrc文件，指定 styleLibraryName 路径为自定义主题相对于 .babelrc 的路径，注意要加 ~。

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui", // 组件库名
        // "styleLibraryName": "theme-chalk" // 主题文件名
        "styleLibraryName": "~theme" // 会引入./theme/index.css
      }
    ]
  ]
}

3. main.js引入示例

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

官方介绍：http://element.eleme.io/#/zh-CN/component/custom-theme