element-ui生成自定义主题

前言：element采用的是scss预编译语言，这里生成主题的方法是官方提供的命令行工具，通过修改scss文件的变量文件，然后重新编译成css样式文件，项目引入我们编译过的样式文件，因为比较简单，下面直接开始步骤：

1、下载命令行工具（最好最为项目依赖）

npm i element-theme -D

2、下载样式模板

npm i element-theme-chalk -D
//或者
npm i https://github.com/ElementUI/theme-chalk -D

3、生成变量文件

et -i

执行上面的命令会在项目根目录生成element-variables.scss文件

可以手动指定文件名和位置

et -i src/styles/vars.scss

4、根据实际需要，修改变量文件里的变量来改变主题

//例如修改主题颜色为黄色
$--color-primary: yellow;

5、生成样式文件

et

执行上面的命令会默认找项目根目录下的element-variables.scss文件，并在项目根目录下生成theme文件夹，里面为生成的样式文件。

如果手动指定了变量文件，则需要使用-c来指定，-o可以指定输出样式文件的目录

et -c src/styles/vars.scss -o src/styles/theme

6、使用

全局使用，在main.js直接引入生成的样式文件

import '../theme/index.css'

按需使用：配合babel-plugin-component插件一起使用，指定styleLibraryName的值为生成的样式文件的相对路径，相对于.babelrc文件的路径，需要加上~。

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "~theme"
      }
    ]
  ]
}