ant-design换肤方案

一个sass项目，在后期设计到独立部署，或者定制化开发，一般都会涉及换肤问题。由于前项目遇到了该问题，所以当前开发的sass初期，直接预留换肤功能。

本方案仅提供一个可实现的方法，市面上有很多其他的解决方案，在此不做优劣对比。

less.js

Less.js 是将 Less 样式转换为 CSS 样式的 JavaScript 工具。所以我们在代码编写过程中使用的less，是打包工具自动帮我们完成了中间的转换过程，但其实less.js我们是可以自行引入，并通过js来进行对应的编译操作。

    <link rel="stylesheet/less" href="./css/color.less">
    <script>
        window.less = {
            async:false,
            javascriptEnabled:true,
            env:"production"
        };
    </script>
    <script type="text/javascript" src="./css/less.min.js"></script>

在具体项目中通过window.less.modifyVars进行变更

jsColorPicker

一个颜色选择器，用于便捷的选择颜色，具体样式根据个人需要自行调整 github.com/PitPik/colo…

antd-theme-generator

一个node.js库，可以单独运行，也可以在run build的指令集中执行，直接将ant-design中的less相关变量抽离出来，对于内存有较大的需求，在运行时，请确保你的内存能满足。

const path = require("path"),
{ generateTheme } = require('antd-theme-generator');

generateTheme({
    antDir: path.join(__dirname,"./node_modules/ant-design-vue"),//antd包位置
    stylesDir: path.join( __dirname,"./src/css/theme"),//主题文件所在文件夹
    varFile: path.join( __dirname,"./src/css/theme/variables.less"),// 自定义的主题色
    mainLessFile: path.join( __dirname,"./src/css/theme/index.less"),// 项目中其他自定义的样式(如果不需要动态修改其他样式，该文件可以为空)
    outputFilePath: path.join( __dirname,"./public/css/color.less"),//提取的less文件输出到什么地方
    themeVariables: [],//要改变的主题变量
    indexFileName:"./public/index.html"// index.html所在位需
});

css样式的var变量

var() 函数用于插入自定义的属性值，各主流浏览器的最低支持版本如下：

版本号
var()	49.0	15.0	31.0	9.1	36.0

:root {
    --primary-color:@primary-color;
    --primary-line-color:@primary-line-color;
    --primary-1: @primary-1;
    --primary-2: @primary-2;
    --primary-3: @primary-3;
    --primary-4: @primary-4;
    --primary-5: @primary-5;
    --primary-6: @primary-color;
    --primary-7: @primary-7;
    --primary-8: @primary-8;
    --primary-9: @primary-9;
    --primary-10: @primary-10;
}

最后

在编写css样式的时候，可以直接使用var()来赋值

border-color:var(--primary-line-color)

执行less.js相应的函数，就可以将对应的变更为你需要的颜色