通过浏览器端less实现定制主题功能

实现效果参考以下页面：https://antdtheme.com/

定制主题的主要实现思路是通过动态修改scss变量实现样式变化，延伸出来主要需要解决以下问题

1. 如何在浏览器页面修改less变量，并能实时查看效果
2. 如何把less变量提取出来，修改并覆盖回源码中

实现过程：

1. 引入浏览器端less以实现页面动态修改less变量 https://cdn.bootcss.com/less.js/3.9.0/less.min.js
2. 引入less样式文件，这里需要注意的是引入的是less源文件，没有经过编译的
   • 这里你可能会遇上点问题，比如打包后scss文件被编译，源文件没有了。解决办法是事先打包合并出一份less文件供定制主题使用。可以使用 less-bundle-promise 这个包
3. 这个时候你已经可以通过前面引入的浏览器端less依赖测试是否能动态修改less变量了，两个核心问题已解决一个，可以的话继续往下走
4. 现在要考虑的是如何提取less变量。这里主要是通过node fs模块去逐行解析less文件，手动提取出变量跟默认值。具体代码你可以看下上面参考页面的源码。
5. 根据提取出的less变量生成表单，动态修改后导出一份json文件
6. 覆盖方式很多，也简单，自行解决