React+antd在线上动态更换皮肤主题_antd-theme-webpack-plugin-优快云博客

本文链接：https://blog.youkuaiyun.com/asdqwe_zxc/article/details/88309987

开始

因为项目里一个更换皮肤的功能，虽然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')