一个基于umi搭建的项目的换肤的实现
因为webpack和umi的层层封装,在线换肤功能实现变得复杂了,antdpro之前提供了动态编译less的方案,可惜中间的webpack插件有问题,而且说实话这个实现不好,每次保存都要把文件夹中所有less文件合并,导致改一行less文件编译时间过长,在antdpro4中也取消了这个功能;而其他的插件大多是实现了antd组件级别的在线换肤,虽说全页面使用antd的变量也能实现,但是我真的记不住那么多的antd变量名,我想自己取名字!!!本文提供一个很简便的方式实现在线换肤,只需一点点点点webpack知识。
思路:
通过css3的var()函数,通过修改全局的配置,达到换肤的效果
定义变量
/src
下的theme.less和theme2.less为我要打包的文件,里面定义了全局的颜色变量
:root {
--color1: #e6fffb;
--color2: #13c2c2;
}
复制代码
然后在less中使用
background-color:var(--color1)
复制代码
当然你可以再封装一层
@bg-color:var(--color1)
background-color:var(--color1)
复制代码
这样在全局使用css3的变量,我们只需要改变--color1就可以达到换肤的效果。
增加打包入口,把less转换为css
umi中可以使用webpack-chain去改变webpack的配置</