Vue + Element + Less 一键换肤的一种方法

首先, 提取公用样式。

这一步要做的内容就是，将Vue 各组件中的Element 样式提取到一个文件，使各组件的样式统一标准，这一步应该不难。

其次，css变量的声明提取。

为了能一键换肤，有种简单的方法是准备多套样式文件，然后根据变量或者环境导入不同的主题，但其实还可以优化，就是在css中声明变量，类似的文件结构大概是element.css 存放css 样式, 然后由不同的主题文件去声明变量对应的值。

举个例子   

element.css 中 background: var(--back-ground);

dark.css(js)中 --back-ground: #000000;

light.css(js)中 --back-ground: #ffffff;

最后，根据不同的变量在main.js 中引入element.css 与对应的主题文件即可。

可能会出现的问题：

1. import 无效问题

试试用require 或者import()

2.打包后生产环境无效问题

build文件夹下 的webpack.prod.conf.js 中extract 改为true 即可