{"id":15106,"date":"2019-01-23T12:06:34","date_gmt":"2019-01-23T06:36:34","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=15106"},"modified":"2025-11-27T13:05:32","modified_gmt":"2025-11-27T07:35:32","slug":"set-up-a-create-react-app-project-with-ant-design-and-less-support","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/web-programming\/set-up-a-create-react-app-project-with-ant-design-and-less-support","title":{"rendered":"A Step by Step Tutorial to set up a Create React App Project with Ant Design and Less Support"},"content":{"rendered":"

Ant Design<\/a> 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<\/a>. 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<\/a>.<\/p>\n\n\n\n

Step 1. Create the Project<\/h2>\n\n\n\n
\n
npx create-react-app react-sample\ncd react-sample\nnpm start<\/code><\/pre>\n<\/div>\n\n\n\n
This will start a browser at: http:\/\/localhost:3000\/<\/a>.<\/p>\n\n\n\n
If you visit the above URL you should see the default CRA page.<\/p>\n\n\n\n
Step 2: Add Ant Design, Craco and Craco Ant Design Plugin<\/h2>\n\n\n\n
\n
npm install antd @craco\/craco craco-antd --save<\/code><\/pre>\n<\/div>\n\n\n\n
Once the above mentioned packages are installed, create a new file with name craco.config.js<\/code> at the same level as that of package.json<\/code> and add the following content to it:<\/p>\n\n\n\n
\n
const CracoLessPlugin = require(\"craco-less\");\n\nmodule.exports = {\n  plugins: [\n    {\n      plugin: CracoLessPlugin,\n      options: {\n        lessLoaderOptions: {\n          modifyVars: {\n            \"@primary-color\": \"#1DA57A\",\n            \"@link-color\": \"#1DA57A\",\n            \"@border-radius-base\": \"2px\"\n          },\n          javascriptEnabled: true\n        }\n      }\n    }\n  ]\n};<\/code><\/pre>\n<\/div>\n\n\n\n
In this file pay special attention to the modifyVars<\/code> section. This section allows you to override the Less variables specified by the Ant Design project<\/a>. In the above example we have replaced the default blue primary color that Ant Design uses with a shade of green.<\/p>\n\n\n\n
Next we need to change the default scripts in the package.json<\/code> file. Change the scripts section in your package.json<\/code> with the following:<\/p>\n\n\n\n
\n
\"scripts\": {\n\"start\": \"craco start\",\n\"build\": \"craco build\",\n\"test\": \"craco test\",\n\"eject\": \"react-scripts eject\"\n},<\/code><\/pre>\n<\/div>\n\n\n\n
Step 3: Rename the App.css<\/code> file to App.less<\/code><\/h2>\n\n\n\n
To use Less in your project, all you need to do is to use .less<\/code> extension instead of the .css<\/code> extension, craco will take care of the rest!<\/p>\n\n\n\n
Rename the App.css<\/code> file to App.less<\/code>. Also replace it’s contents with the following:<\/p>\n\n\n\n
\n
@import '..\/node_modules\/antd\/lib\/style\/index';\n.App {\n    padding: 20px;\n    h1 {\n        color: @heading-color\n    }\n}<\/code><\/pre>\n<\/div>\n\n\n\n
Step 4: Modify App.js<\/code> to use Ant Design<\/h2>\n\n\n\n
Replace the contents of the App.js<\/code> file with the following:<\/p>\n\n\n\n
\n
import React, { Component } from 'react';\nimport { Button } from 'antd';\nimport 'antd\/lib\/button\/style';\nimport '.\/App.less';\n\nclass App extends Component {\n  render() {\n    return (\n      <div className=\"App\">\n        <h1>Create React Project with Ant Design and Less Support<\/h1>\n        <Button type=\"primary\">Button<\/Button>\n      <\/div>\n    );\n  }\n}\n\nexport default App;<\/code><\/pre>\n<\/div>\n\n\n\n
Here we are just using a Ant Design button along with the h1<\/code> tag. In the App.less<\/code> file above, we have used the @heading-color<\/code> Ant Design variable to specify the color for the h1<\/code> tag.<\/p>\n\n\n\n
Also it’s important to notice, that we are importing the individual button component styles with import 'antd\/lib\/button\/style';<\/code> instead of importing the whole Ant Design css. This helps us to keep the final bundle size as small as possible.<\/p>\n\n\n\n
That’s it! We are done. To test our project run:<\/p>\n\n\n\n
\n
npm start<\/code><\/pre>\n<\/div>\n\n\n\n
and point your browser to: http:\/\/localhost:3000\/<\/a><\/p>\n\n\n\n
Just to ensure that you are using Less through out the project, I will suggest that you should rename the index.css<\/code> file to index.less<\/code> and modify the index.js<\/code> file accordingly.<\/p>\n\n\n\n
Hope this tutorial helped you to setup a React Project from scratch using Ant Design and Less Support. You can download the source code<\/a> for this project from here<\/a>.<\/p>\n\n\n\n