在react中用less动态切换主题样式

• 1. 使用命令弹出项目的配置文件，命令执行后可看到config文件夹

      弹出项目配置的命令：yarn eject

• 2. 安装less

      yarn add less  
      yarn add less-loader      

• 3. 配置环境，在webpack.config.js文件里面修改，找到css的规则，修改三个地方

      1) 'css-loader'的test： /\.css$/  改为  /\.(css|less)/
      2) 'css-loader'的importLoaders：1改为2
      3) 添加loader： less-loader
      添加完后类似以下代码：
      

{
        test: /\.(css|less)/,  // 添加less或者css
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 2,  // 改为2
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
          // 添加less-loader
          {
            loader: 'less-loader'
          }
        ]
}

 

• 4. 在主页面加入less样式文件，该文件是主题变化中颜色的样式集合

       1) 在public\index.html将less文件加进来，且以link形式，且一定要有rel="stylesheet/less"，才能正常用less.modifyvars进行动态改变变量值如下：
         <link rel="stylesheet/less" type="text/css" href="theme.less" />              
       2) theme.less的内容可参考如下(主要是定义颜色的变量,例如主色调变量@primary-color):
        

@primary-color: #000;
body{
    background: @primary-color;
    .ant-btn{
        color: @primary-color;
    }
}

 

• 5. 在代码中，引入less，在需要改变主题的地方调用less.modifyvars改变变量值。

       例如在src\Dashboard\index.jsx中切换主题样式
       1) 引入less
        

import less from 'less';

       2) 调用less的modifyvars方法
        

changeTheme = (themeCss) => { // 改变主题样式
    less.modifyVars({
       '@primary-color': 'red'
    });
}