React中使用less修改界面主题 less.modifyVars

1. 新建两个文件一个是theme.less样式文件，一个是less.js文件，js文件的内容可以在 点击下载。
2. 安装 less 和 less-loader

npm i less --save
npm i less-loader --save

3. 配置环境，在webpack.config.js文件里面修改，找到css的规则，修改三个地方 css-loader’的test： /.css$/ 改为 /.(css|less)/ css-loader’的 importLoaders：1改为2 添加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: {
          
   
          ident: postcss,
          plugins: () => [
            require(postcss-flexbugs-fixes),
            autoprefixer({
          
   
              browsers: [
                >1%,
                last 4 versions,
                Firefox ESR,
                not ie < 9,
              ],
              flexbox: no-2009,
            }),
          ],
        },
      },
      // 添加less-loader
      {
          
   
        loader: less-loader
      }
    ]
}

4. 在 index.html 页面将 less 文件和 js 文件引入，注意路径问题

<link rel="stylesheet/less" href="/theme.less">
<script type="text/javascript" src="/less.min.js"></script>

在 less 文件里定义主题变量

@primary-color: white;
body{
          
   
    background: @primary-color;
    /* 我这里使用的是antd框架 */
    .ant-btn{
          
   
        color: @primary-color;
    }
}

5. 在修改的页面，引入less

import less from less;

// 通过方法修改主题
changeTheme = (value) => {
          
   
    less.modifyVars({
          
   
       @primary-color: value
    });
}