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

最新推荐文章于 2025-08-29 23:24:53 发布

原创最新推荐文章于 2025-08-29 23:24:53 发布 · 1w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#less #react #样式切换

开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在React项目中实现样式切换的方法。先通过yarn eject命令弹出项目配置文件，接着安装less和less-loader，然后在webpack.config.js里修改配置。在主页面加入less样式文件，最后在代码中引入less，调用less.modifyvars方法改变变量值来切换主题样式。

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'
    });
}