在react-boilerplate中配置antd主题

Question

我正在尝试在react-boilerplate中配置antd主题。我在react-boilerplate存储库中看到了问题2027。这正是我想要的，但我在接受的答案中尝试了给定的配置，它对我不起作用。

在vanilla react-boilerplate repo中，我安装了antd。在HomePage (index.js)中，我添加了一个按钮、复选框

<Button type="primary">Primary</Button>
<Checkbox onChange={onChange}>Checkbox</Checkbox>

我的webpack.base.babel.js看起来像

const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './../../app/theme.less'), 'utf8'));

其中一条规则是

      {
        test: /\.less$/,
        include: /node_modules/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              modifyVars: themeVariables,
            },
          },
        ],
      },

theme.less文件是

@ant-prefix: ant;

@primary-color: #ff0000;
@btn-primary-color: #ff0000;
@checkbox-color: #ff0000;
@checkbox-check-color: #ff0000;

我尝试覆盖按钮或复选框中任何可能的颜色，但无法更改主题颜色。

我是不是漏掉了什么？我已经被困在这一点很长一段时间了。任何建议都会有很大帮助。

Answer 1

尝试将ant样式导入到index.js，将样式应用到整个应用程序。

只需添加以下导入

import 'antd/dist/antd.less';

有关更多信息，请访问antd documentation