React+antd在线上动态更换皮肤主题

4,797 阅读6分钟

开始

因为项目里一个更换皮肤的功能,虽然antd官网给出了更改主题的方法,但那是静态的,没办法在线上更换,然后发现网上在这方面的资料也并不多,这个业务难道不是应该很普遍吗?然后我就花了一些时间去解决了这个问题,并将踩过的坑写出来,再给出解决方案。

antd-theme-webpack-plugin

这个工具是我在网上找到的。下面是这个包的文档,但这个文档实际上写的并不清楚,我在按文档写的过程里遇到了很多的坑。

antd-theme-webpack-plugin文档

我们先在控制台执行: yarn run antd-theme-webpack-plugin -D

然后去webpack.config.common.js里配置:

//顶部引入
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

//需要在less-loader里配置options,这个配置是在less的配置规则下
{
    loader:'less-loader',
    options:{
    	//这里需要在less的配置规则里打开javascriptEnabled
        javascriptEnabled: true,
    }
}


//在plugins里
plugins:[
	new AntDesignThemePlugin({
		antDir: path.join(__dirname, './node_modules/antd'),//antd包位置
    	stylesDir: path.join(__dirname, './src/styles/theme'),//指定皮肤文件夹
    	varFile: path.join(__dirname, './src/styles/theme/variables.less'),//自己设置默认的主题色
    	indexFileName: './public/index.html',
    	mainLessFile: path.join(__dirname, './src/styles/theme/index.less'),
    	outputFilePath: path.join(__dirname, './dist/theme/color.less'),//输出到什么地方
    	themeVariables: [//这里写要改变的主题变量
        	'@primary-color',
        	'@btn-primary-bg',
    	],
    	generateOnce:false
	})
]

这里的配置有几个坑点,等下结合后面一起说。

然后我们去index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React</title>
</head>
<body>
    <link rel="stylesheet/less" type="text/css" href="./theme/color.less" /><!--这里link放在哪,style生成在哪里,注意样式被覆盖-->
    <script>
        window.less = {
            async: false,
            env: 'production'//production  development
        };
    </script>
    <div id="root"></div>
    <script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js">
    </script>

</body>
</html>

html这里有几个坑: 1.注意link标签放的位置,要放在body的第一行里,因为到时候style是会生成在该ling标签下面的,如果你把link放在head里,到时候生成的主题样式会被覆盖掉。 2. 我们需要在这里引入less文件,因为我们需要使用到window.less这个对象里的方法,但是我们不能引入less3.0以上的,不然浏览器控制台会报下面这样的错,样式也不会出现。

在这里插入图片描述

然后在styles的文件夹下创建文件,这里文件创建的路径需要和webpack.config.common.js里写的路径一样。

在这里插入图片描述
然后在variables.less里:

//在顶部加上这一行
@import "~antd/lib/style/themes/default.less";

@primary-color: #6064f4;
@btn-primary-bg: #ccc849;

然后把要更换的主题颜色给写上去,把antd默认的主题颜色给覆盖掉,这里有个坑的地方是,这里的两个颜色变量一定要写上去,不然有的时候会出现更换主题颜色失败的情况。

index.less这个文件其实是可有可无的,我们可以不在里面写东西,但是我在项目里用到了,后面会说。

然后我们去页面里写一下:

handleClick(){
        window.less.modifyVars(//更换主题颜色要这么写
            {
                '@primary-color': '#e64e14',
                '@btn-primary-bg': '#5d72cc',
            }
        )
        .then(() => {console.log('success')})
        .catch(error => {
            console.log(error);
        });
    }
    render() {
        return (
            <div className='minor-borderTop major-fontColor'>
                <Button onClick={this.handleClick} type={'primary'}>更换</Button>
            </div>
        )
    }

然后坑的地方来了,如果你想要使用variable.less里的变量,一般来说我们都是在自己新建的less文件的顶部引入这个文件,然后在用到颜色的地方直接加上@primary-color这个变量,但是这里不行,因为它只会把variables.less和index.less这两个文件里的变量给更改了,其他的文件是固定生成的,不会被覆盖。所以如果你想用得反过来,比如在新建的less文件里使用变量,然后在variables.less的顶部引入。但这样肯定是不好的,react有那么多组件,如果每个都引入到这个variabkes.less的顶部的话,那得多大?

然后我想了两个办法,

  1. 使用css的变量var,在variabkes.less文件里,像下面这样写:
@primary-color: #6064f4;
@btn-primary-bg: #ccc849;

:root{
  --primary:@primary-color;
}

这样子你需要使用的less文件里就可以引入variabkes.less文件,然后这样写background:var(--primary),这样在@primary-color改变了之后,--primary也可以拿到了。但是这个方法有兼容性问题,ie完全不支持css变量,所以这个方法适合不需要兼容ie的使用。

  1. 这里就用到了我之前说的index.less,我们在index.less的顶部引入variabkes.less,在里面写:
.primary-bg{
  background-color:@primary-color;
}

.fontColor{
  color:@primary-8;
}

我们可以直接新建几个类,写上背景颜色,文字颜色,等@primary-color改变的时候,类里的颜色也会发生改变。然后在需要的地方引用这个index.less,然后去组件里加上这个类就行了。其实这个方法算是稍微有点low,但是这个也算是一个比较好的解决办法,因为你要加的类其实没有几个,背景颜色类,字体颜色类。这里讲一下你要改变的颜色变量必须要是antd定义好的,你自己定义一个比如@primary-fontColor是没用的,因为antd并没有这个变量,如果你要看antd定义了哪些变量,可以去node_modules/antd/lib/style/themes/default.less这个文件里看。上面那里我使用的@primary-8这个变量就是antd自己定义的,这个变量是根据@primary-color的颜色来变化的,所以我们不需要在webpack引入,数字越大颜色越深。

然后开始打包,你需要在dist文件夹下创建一个theme文件夹,然后才能去执行打包命令,然后你会发现,在theme文件夹下有一个color.less文件,在根目录下也有一个color.less文件,你可以把根目录下的color.less删除,这个是多余生成的。

然后我们打开自己写的页面:

在这里插入图片描述
可以发现主题颜色是我们在variables.less定义的默认颜色,然后我们点击按钮,页面变成了下面这样:
在这里插入图片描述
变成了我们在按钮点击事件里定义的颜色了。
在这里插入图片描述
我们发现link下面生成了一个style文件,这里就是之前说的颜色注意被覆盖的问题了。

如果你想要更多的颜色,可以引入调色盘的组件去改变主题颜色,比如antd官网拉到最下方可以改变主题颜色那样。

结尾

这章写了很多东西,主要是有坑的地方太多了,我写的又比较详细,但同时感觉也写的有点复杂了,如果又不懂的可以在评论里问。