react+less换肤方案一、css变量 1.1定义variable变量 1.2在页面对css变量引用 1.3css变

一、css变量

1.1定义variable变量

// variable.less
// 默认变量
:root {
  --fill-1: #fff;
  --text: #3c3c3c;
  --text-1: #757575;
  --text-2: #222;
  --font-size-large: 18px;
  --font-size-large-x: 22px;
  --font-size-medium: 14px;
  --font-size-medium-x: 16px;
  --font-size-small-s: 10px;
  --font-size-small: 12px;
}

// 深色变量
[data-theme="dark"] {
  --fill-1: #222;
  --text: #fff;
  --text-1: rgba(255, 255, 255, 0.3);
  --text-2: #ffcd32;
}

1.2在页面对css变量引用

@import "../../styles/variable.less";

.test {
  background: var(--fill-1);
  color: var(--text);
}

1.3css变量兼容性方案-1

安装postcss-custom-properties这个插件

npm install postcss-custom-properties --save-dev npm install postcss-loader --save-dev

在根目录新建postcss.config.js增加配置，配置如下：

module.exports = {
  plugins: [
    require("postcss-custom-properties")({
      importFrom: "./src/styles/variable.less"
    })
  ],
};

1.4.css变量兼容性方案-2

安装css-vars-ponyfill 插件

具体使用查看官网

二、modifyVars动态更换antd皮肤

1.安装antd-theme-webpack-plugin

yarn add antd-theme-webpack-plugin -D

2.webpack配置

const AntDesignThemePlugin = require('antd-theme-webpack-plugin');
...
plugins: [
new AntDesignThemePlugin({
      antDir: path.join(__dirname, '../node_modules/antd'),//antd包位置
      stylesDir: path.join(__dirname, '../src/styles/theme'),//指定皮肤文件夹
      varFile: path.join(__dirname, '../src/styles/theme/variable.less'),//自己设置默认的主题色
      indexFileName: '../public/index.html',
      // mainLessFile: path.join(__dirname, './src/styles/theme/index.less'),
      outputFilePath: path.join(__dirname, '../build/color.less'),//输出到什么地方
      themeVariables: [//这里写要改变的主题变量
        '@primary-color',
        '@btn-primary-bg',
      ],
      generateOnce: false
    })
]

3.在index.html添加link

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react</title>       
</head>
<body>
  <link rel="stylesheet/less" type="text/css" href="./color.less" /><!--这里link放在哪，style生成在哪里，注意样式被覆盖-->
    <script>
        window.less = {
            async: false,
            env: 'development'//production  development
        };
    </script>
    <div id="root"></div>
    <script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js">
    </script>
</body>
</html>

注意点：

注意link标签放的位置，要放在body的第一行里，因为到时候style是会生成在该ling标签下面的，如果你把link放在head里，到时候生成的主题样式会被覆盖掉。
我们需要在这里引入less文件，因为我们需要使用到window.less这个对象里的方法，但是我们不能引入less3.0以上的。

4.styles文件夹下创建variable.less

//在顶部加上这一行
@import "~antd/lib/style/themes/default.less";

@primary-color: #6064f4;
@btn-primary-bg: #ccc849;

然后把要更换的主题颜色给写上去，把antd默认的主题颜色给覆盖掉，这里有个坑的地方是，这里的两个颜色变量一定要写上去，不然有的时候会出现更换主题颜色失败的情况。

5.进行antd换肤

<button onClick={() => {
  window.less.modifyVars(//更换主题颜色要这么写
    {
      '@primary-color': 'red',
      '@btn-primary-bg': 'pink',
    }
  )
    .then(() => { console.log('success') })
    .catch((error: Error) => {
      console.log(error);
    });
}}>换肤</button>