老板让换肤？经理让换肤？....我就喜欢我黑，我不想变白！

三个月前，我接到了需求，在新项目中完成动态换肤功能。
当时我的项目是这样的：

vue2 + less

我专门定义了一个default.less文件存储了公共的颜色变量，要求开发人员使用公共变量开发less样式文件。我认为如果实现换肤，我只需要切换这个公共的less即可实现动态换肤。
当时我们的项目引用了ant组件，因此我在main.js中按照ant官方给的主题切换方法，配置了default.less；

在main.js中引入：

import "~ant-design-vue/dist/antd.less"; // ant
import "./assets/css/style/default.less"; // 皮肤控制

两个月后，我准备开始处理换肤的功能，于是我在思考，如何动态切换这里引入的文件default.less为light.less，绞尽脑汁，我用到了loadingStore，在main.js中做了if判断：

import "~ant-design-vue/dist/antd.less"; // ant
if(loadingStore.getItem("skin") === "default"){
  import("./assets/css/style/default.less"); // 皮肤控制
}else{
  import("./assets/css/style/light.less"); // 皮肤控制
}

努力终将有回报，甭管代码漂不漂亮，我发现能换了，当我高兴的时候，我提醒自己发布一版看一看！
结果三观被击毁！
less是预编译语言，打包的过程中，已经完美的生成了一个漂亮的css文件。怎么切换？从何切换？
我的服务器是nginx，不是我本地的开发软件。

于是我开始重新思索，如何切换，我认为自己的逻辑没有问题，通过公共两套的less变量控制不同的皮肤。
查资料，问高人，最终发现一个可行的方案：

创建style.less内容如下：

.default{
  @import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
  @import 'default.less'; // 用于覆盖上面定义的变量
}
.light{
  @import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
  @import 'light.less'; // 用于覆盖上面定义的变量
}

在main.js中引入：

import "./assets/css/style/style.less"; // 主题控制

我只需要动态切换default和light两个不同的样式。
通过努力，我成功了，class跟随变化，但是，ant跪了。
是的跪了，我默认皮肤进来后没有问题，点击切换皮肤，ant跪了，因为有部分的ant组件如转圈圈（Spin）不动了，它们占据了我的屏幕。
此时我发现我似乎忘记了什么？不能同时引入同一个less？我做了尝试，在node_modules复制了ant-design-vue2，然后改了light的引入路径。

style.less内容如下：

.default{
  @import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
  @import 'default.less'; // 用于覆盖上面定义的变量
}
.light{
  @import '~ant-design-vue2/dist/antd.less'; // 引入官方提供的 less 样式入口文件
  @import 'light.less'; // 用于覆盖上面定义的变量
}

OK了，完美的实现了换肤功能！！！！

但是我又高兴早了，虽然项目基于ant的UI框架开发，但是有很多地方我们依然是自己手写组件，我还有除ant之外的一大堆less文件，这些地方没有跟随变化。
我不能因为换肤，要求所有同事，把所有的less全部对接两套，那样改目录结构，改图片引用路径将会让人疯掉。

天那！！！为什么我的项目没有从头到尾依赖antUI？或者为什么当初不能全部摒弃，自己手写所有的UI组件？
有经验的大佬们都晓得，纯手写不是不可能，但是时间是一个大问题，没有哪个项目会静静的等你写一个新的Ant2？等你写出来黄花菜都凉了。因此使用现成的UI框架是一个省心省力的过程，但是大家也明白，没有人会整个项目全部使用它的组件开发，毕竟多有冲突和不便，设计师的灵魂都是飞舞的，需求的变态都是超级辣的，很多时候，写一个比改一个要容易的多。

后续：另一种思路，我认为vue打包样式，应该可以通过某种方式生成两套css样式文件，我只需要切换这两套文件即可。研究中....是否成功，且走且瞧着，说不定老板一高兴，不弄了！哈哈哈哈！

@import指令

学习不能停！！！！
关于less中的@import指令：

选项	含义
reference	使用文件，但不会输出其内容（即，文件作为样式库使用）
inline	对文件的内容不作任何处理，直接输出
less	无论文件的扩展名是什么，都将作为LESS文件被输出
css	无论文件的扩展名是什么，都将作为CSS文件被输出
once	文件仅被导入一次 （这也是默认行为）
multiple	文件可以被导入多次
optional	当文件不存在时，继续编译（即，该文件是可选的）

例如：

@import (optional, reference) "foo.less";