在 vue-cli 项目中使用elementUI 的【自定义主题】

如果你的项目使用的是SCSS来编写的css样式

1、因为Element 的 theme-chalk 使用的是 SCSS 编写，然后自己的项目，用的也是scss来写的css样式，那么可以直接在自己的项目中改变 Element 的样式变量
2、新建一个样式文件，例如 element-variables.scss，写入以下内容

/* 改变主题色变量 */
$--color-primary: #17b3a3!default;

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

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

3、在自己项目的入口文件main.js中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）

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

Vue.use(Element)

需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。

如果你的项目使用的不是SCSS来编写的css样式

1、安装elementUI

npm i element-ui -S

2、安装主题工具

npm i element-theme -g

3、安装chalk主题

npm 安装(推荐)
npm i element-theme-chalk -D
或者GitHub 拉取最新代码 npm i github.com/ElementUI/t… -D

4、修改theme的sass文件

主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss，当然你可以传参数指定文件输出目录。

et -i   // [可以自定义变量文件，默认为element-variables.scss]

> ✔ Generator variables file //表示成功

此时项目根目录下会产生 element-variables.scss 文件，内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义的，大致如下：

5、直接编辑编辑 element-variables.scss 文件，修改为自己所需要的颜色主题色

例如： $--color-primary: #17b3a3!default;

6、编译主题

修改完变量后，到命令行里执行 et 编译主题（如果编译后，再次修改了变量，需要重新编译）

et

> ✔ build theme font
> ✔ build element theme   //表示从新编译成功

执行主题编译命令生成主题，根目录会生成 theme 文件夹。需要引入这个文件夹里的 css、font 等资源。（theme文件夹里有font文件夹和大量的css文件，css文件只留下index.css,其他的css文件都可以删掉，因为index.css中的样式包含其他全部css文件的样式。）

7、引入自定义主题,在main.js文件中引入：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui'  //  这里
import '../theme/index.css'  // 这里
// import 'element-ui/lib/theme-chalk/index.css'


Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

8、在vue组件中使用自己定义的主题

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>

结果如图所示：

8、搭配插件按需引入组件主题

相关链接：element.faas.ele.me/#/zh-CN/com…
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        // "styleLibraryName": "theme-chalk"，// 变成我们自己手动生成的主题
        "styleLibraryName": "~theme"
      }
    ]
  ]
}

在 vue-cli 项目中 使用elementUI 的【自定义主题】