element-ui中更改scss变量、并能一键更改主题颜色

element-ui中的样式是使用scss编写的，然后编译成css。就是我们在main.js中引入的那个css文件
import ‘element-ui/lib/theme-chalk/index.css’;

1、更改scss变量

1、为什么要更改

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。

Vue.use(Element, { size: 'small', zIndex: 3000 });

使用size改变组件的默认尺寸，但是只有large/medium / small / mini这几个选项可选。那么有时我们想要改为其它任意的尺寸。

2、怎么改

新建一个scss文件，假设命名为myElement.scss

$--font-size-base: 24px !default;
$--size-base: 24px !default;
$--font-line-height-primary: 40px !default;

$--font-path: '/fonts' !default;

$--select-input-font-size: 24px !default;
$--select-option-height: 60px !default;
$--select-group-height: 50px !default;
$--select-group-font-size: 24px !default;
$--select-dropdown-max-height: 500px !default;

$--input-height: 60px !default;
$--input-width: 250px !default;

$--button-font-size: 24px !default;
$--button-padding-vertical: 17px !default;
$--button-padding-horizontal: 34px !default;

$--radio-input-height: 24px !default;
$--radio-input-width: 24px !default;
$--radio-font-size: 24px !default;

$--dialog-font-size: 24px !default;

$--collapse-header-font-size: 26px !default;
$--collapse-content-font-size: 24px !default;
$--collapse-header-height: 78px !default;

$--pagination-font-size: 26px !default;
$--pagination-button-width: 90px !default;
$--pagination-button-height: 60px !default;

$--input-mini-font-size: 24px !default;
$--input-mini-height: 60px !default;

$--message-close-size: 26px !default;
$--messagebox-error-font-size: 24px !default;
$--messagebox-font-size: 26px !default;
$--messagebox-content-font-size: 24px !default;

然后引入module中的element的scss文件

@import "../../node_modules/element-ui//packages/theme-chalk/src/index.scss";

最后在所在文件夹，打开命令窗口，然后运行如下命令进行编译

sass myElement.scss myElement.css --style compressed

在编译 Sass 代码时，我们可以指定 Sass 的编译输出格式，这需要用到 --style 指令，这个指定后面可接如下四种 Sass 输出格式：
nested：嵌套输出格式，默认格式。
expanded：展开输出方式。
compact：紧凑输出方式 。
compressed：压缩输出方式 。

编译后，在所在文件夹内得到一个名为myElement.css的文件。在main.js中引入它。

2、一键更改主题颜色

一键更改element主题颜色的原理，就是找到指定style标签，然后生成一个新的样式文件，然后替换调原来的style标签。