美文网首页
umi项目换肤功能的实现

umi项目换肤功能的实现

作者: 春饼sama | 来源:发表于2019-06-25 23:52 被阅读0次

    一个基于umi搭建的项目的换肤的实现

    源码和demo

    因为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: @bg-color;
    

    这样在全局使用css3的变量,我们只需要改变--color1就可以达到换肤的效果。

    增加打包入口,把less转换为css

    umi中可以使用webpack-chain去改变webpack的配置

    // 简单的增加webpack打包的入口
     config
      .entry('mytheme')
      .add(path.join(__dirname, '../src/theme.less'))
      .end()
    

    优化为一个数组themeArr:

    const theme = [
      {
        name:'mytheme',
        path:`${path.join(__dirname,'../src/theme.less')}`
      },
      {
        name:'theme2',
        path:`${path.join(__dirname, '../src/theme2.less')}`
      }
    ]
    
    // config中使用
      themeArr.forEach(({name,path}) => {
        config.entry(name).add(path).end()
      })
    

    这样打包的文件夹下面就会多出
    mytheme.css和theme2.css
    接下来只要引入这两个文件,并改变这link便签的url即可

    我就简单粗暴的在document.ejs
    引入

    <link rel="stylesheet" href="/mytheme.css" id='theme'>
    

    改变

      const changeTheme = key => {
        const index = themeArr.findIndex(element => element.name === key);
        document.head.querySelector('#theme').setAttribute('href', `./${themeArr[index].name}.css`);
      };
    
        {themeArr.map(({ name }) => (
              <Button
                key={name}
                onClick={() => {
                  changeTheme(name);
                }}
              >
                改变颜色{name}
              </Button>
        ))}
    

    以上就完成了换肤功能demo,非常的简单,在生产环境中使用可以,把主题作为key存在后台,获取用户信息后在head标签中插入link获取css变量。

    相关文章

      网友评论

          本文标题:umi项目换肤功能的实现

          本文链接:https://www.haomeiwen.com/subject/eywfcctx.html