Question

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

在香草反应样板仓库中，我安装了antd。在主页（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

尝试将蚂蚁样式导入到您将index.js应用于整个应用的样式。

只需添加以下导入

import 'antd/dist/antd.less';

有关更多信息，您可以关注antd documentation

在react-boilerplate

1 个答案: