Love Ant.D! about rekit

[supnate]

Thanks @loganpowell :) I'm also indeed a And.D fan.

[loganpowell]

Thought so! Any tips/advice for how best to use ant.d with Rekit? Should we follow the Use in create-react-app workflow/process?

[loganpowell]

No dice on incorporation of ant.d?

[supnate]

Oh, sorry @loganpowell , I thought I answered your question.
Actually a Rekit app is just a normal React project, no special config needed. You can just follow the guide on https://ant.design/docs/react/getting-started . Or you can also refer to Rekit portal for the usage.

[loganpowell]

Great. So, just update the webpack.test.config.js file or the webpack-config.js file?

[loganpowell]

Also, following this tutorial (step 4) it looks like webpack-config.js is using webpack1 syntax... should I be using that? I.e.:

// webpack*.config.js
const path = require('path');
const fs  = require('fs');

const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './ant-theme-vars.less'), 'utf8'));
...
// webpack2.config.js
module: {
  rules: [
    ...
    {
      test: /\.less$/,
      use: [
        {loader: "style-loader"},
        {loader: "css-loader"},
        {loader: "less-loader",
          options: {
            modifyVars: themeVariables
          }
        }
      ]
    }
  ]
}
//webpack1.config.js
module: {
  loaders: [
    {
      test: /\.less$/,
      loader: 'style-loader!css-loader!less-loader',
      query: {
        modifyVars: themeVariables
      }
    },
  ...
  ]
}

[fgiarritiello]

HI, has anyone added antd to rekit?

Amazing work BTW.

[supnate]

@fgiarritiello Since Rekit app is based on create-react-app, you can follow https://ant.design/docs/react/use-with-create-react-app to add antd to a Rekit project. The only thing you need to be aware of is enable javascript for less-loader if you want to compile antd style locally:

{
            test: /\.less$/,
            use: [
              {
                loader: 'style-loader',
              },
              {
                loader: 'css-loader',
                options: { sourceMap: true },
              },
              {
                loader: 'less-loader',
                options: { sourceMap: true, javascriptEnabled: true },
              },
            ],
          },

As I know antd is widely used in Rekit projects.