Create React App Project with Ant Design and Less Support

Ant Design is a very popular UI component toolkit. It contains almost every UI component that one might require in an Enterprise React application. For styling Ant Design uses Less CSS Preprocessor. Unfortunately the Create React App (CRA) project doesn’t come with inbuilt Less support. In this article we will see how to set up a React project from scratch using CRA with Ant Design and Less support using the craco.

Step 1. Create the Project

npx create-react-app react-sample
cd react-sample
npm start

This will start a browser at: http://localhost:3000/.

If you visit the above URL you should see the default CRA page.

Step 2: Add Ant Design, Craco and Craco Ant Design Plugin

npm install antd @craco/craco craco-antd --save

Once the above mentioned packages are installed, create a new file with name craco.config.js at the same level as that of package.json and add the following content to it:

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          modifyVars: {
            "@primary-color": "#1DA57A",
            "@link-color": "#1DA57A",
            "@border-radius-base": "2px"
          },
          javascriptEnabled: true
        }
      }
    }
  ]
};

In this file pay special attention to the modifyVars section. This section allows you to override the Less variables specified by the Ant Design project. In the above example we have replaced the default blue primary color that Ant Design uses with a shade of green.

Next we need to change the default scripts in the package.json file. Change the scripts section in your package.json with the following:

"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},