Create Dynamic theme with antd and reactjs

说在前面

由于业务需要，在用蚂蚁金服antd组件库时需要设置两种主题色动态切换。在这里踩了一些坑，觉得有必要写一篇水文记录一下。

步骤

• 安装webpack插件以进行动态主题化

cnpm install antd-theme-webpack-plugin

• 在您的webpack.config.js文件中导入此插件，使用有效的路径参数初始化并在webpack配置对象中添加插件数组。

const AntDesignThemePlugin = require（'antd-theme-webpack-plugin'）; 
 
const options = {
    
  antDir：path.join（__ dirname，'。/ node_modules 
  /antd'），stylesDir：path.join（__ dirname，'。/ src / styles'），
  varFile：path.join（__ dirname，'。/ src /styles/variables.less'），
  mainLessFile：path.join（__ 
  dirname，'。/ src / styles / index.less'），
  themeVariables：['@ primary-color']，
  indexFileName：'index.html' 
} 
 
const themePlugin = new AntDesignThemePlugin（options）;
//在插件部分，添加此插件实例
插件： [themePlugin，其他一些插件]

• antDir如果webpack.config.js文件和node_module