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

本文介绍了如何新建theme.less样式文件，并在webpack中配置less-loader，实现Less文件的处理。步骤包括安装依赖、修改webpack配置、引入less到HTML并定义主题变量，以及如何通过JavaScript动态改变主题。适合前端开发者学习Less和模块化CSS管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

配置环境，在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: {
          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'
      }
    ]
}

在 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;
    }
}

在修改的页面，引入less

import less from 'less';

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