react中引入less并支持antd主题换肤

介绍

antd的样式使用了Less作为开发语言，并定义了一系列全部的样式变量，我们可以改变对应变量值来进行相应调整换肤。

react中引入less

要修改webpack配置，首先需要将webpack的配置文件先暴露出来

npm run eject

安装依赖包

npm i less less-loader

然后修改eject出来的webpack.config.js文件

antd主题换肤

修改上面的配置

其中vars.less文件内容为

// vars.less
@import '~antd/lib/style/themes/default.less';
@dark-bg: #161626;
@primary-color: #56A902;
@font-size-base: 12px;
@male-color: #3F92FE;
@female-color: #FF7D97;
@error-color: #cf1322;

以上这些变量都可以在全局.less文件中直接引用，且无需再import该文件。
另外，除了加载指定路径外，也可以直接覆盖主题变量，同样生效。

{
  test: /\.less$/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader'
  }, {
    loader: 'less-loader',
    options: {
      modifyVars: {
        'primary-color': '#0f0'
      }
    }
  }]
},

报错1

那一定是你的路径写的不对，好好检查一下。

版本号

因为这些个依赖总是随时更新，然而每次更新都会出现新的报错，也不给出个具体方案，所以这里的版本号请参考下表

// package.json
"antd": "^4.0.1",
"less": "2.7.2",
"less-loader": "^5.0.0",
"react": "^16.13.0",