BACKGROUND

In order to alter the theme of Ant Design, there are multiple target files that we have to change. The most important file will be the webpack config file, however, it is hard to access it directly.

The file is located inside the folder of node modules:

We can also make use of npm run eject directly to get the config file at our project root, however, it is also not effective to add small changes to such large file.

Therefore, we can use react-app-rewiredto define a small external config file and override the default theme file easily.

 

 

SOLUTION

 

STEP 1:

Install all the dependencies / tools needed

Explained:

react-app-rewired: main tools we need for overriding the default config file

customize-cra: dependencies for latest version of create-react-app and webpack4

babel-plugin-import: Used to import less file as styling

less: Default development language for styling in Ant Design

less-loader: Compiler for translating less into css

 

STEP 2:

Change the default npm scripts to react-app-rewired

Edit package.json under folder root, replace react-scriptsby react-app-rewired

 

STEP 3 (FINAL STEP):

Add the override config file(config-overrides.js) directly at the folder root (same directory as package.json)

 

CATCH-UP:

All the customized value should be placed inside modifyVars:{}

List of common theme variables used by Ant Design: