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

开始
因为项目里一个更换皮肤的功能,虽然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
})
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
这里的配置有几个坑点,等下结合后面一起说。

然后我们去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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
1
2
3
4
5
然后把要更换的主题颜色给写上去,把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>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
然后坑的地方来了,如果你想要使用variable.less里的变量,一般来说我们都是在自己新建的less文件的顶部引入这个文件,然后在用到颜色的地方直接加上@primary-color这个变量,但是这里不行,因为它只会把variables.less和index.less这两个文件里的变量给更改了,其他的文件是固定生成的,不会被覆盖。所以如果你想用得反过来,比如在新建的less文件里使用变量,然后在variables.less的顶部引入。但这样肯定是不好的,react有那么多组件,如果每个都引入到这个variabkes.less的顶部的话,那得多大?

然后我想了两个办法,

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

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

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

.fontColor{
color:@primary-8;
}
1
2
3
4
5
6
7
我们可以直接新建几个类,写上背景颜色,文字颜色,等@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官网拉到最下方可以改变主题颜色那样。

结尾
这章写了很多东西,主要是有坑的地方太多了,我写的又比较详细,但同时感觉也写的有点复杂了,如果又不懂的可以在评论里问。
————————————————
版权声明:本文为CSDN博主「web999_Z」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/asdqwe_zxc/java/article/details/88309987

上一篇:VuePress博客美化之reco主题


下一篇:ag-grid-vue表格的一些问题总结(一)