Step 1. Create the Project
npx create-react-app react -sample
cd react -sample
npm start
Step 2: Add Ant Design, Craco and Craco Ant Design Plugin
npm install antd @craco/craco craco -antd --save
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
}
}
}
]
} ;
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.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"
} ,