I want to use Antd without importing the less in my ReactJS application. The major reason for that is that I am using the create-react-app boilerplate to create my application. Antd requires me to modify webpack.config.js to compile the less for deploying my code on any server. I don't want to bad code by modifying the webpack inside the node_modules and I don't have enough knowledge to use npm eject. Can anyone suggest to me a solution to use Antd with create-react-app?
Antd Custom Theme in ReactJS without using .less
Viewed 2333
1 Answers
It can be achieved with create-react-app without doing npm eject or modifying node modules. Below are some packages that you needed:
- react-app-rewired: tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts.
- customize-cra: we need customize-cra along with react-app-rewired due to new react-app-rewired@2.x issue.
- babel-plugin-import: for importing components on demand.
- less: default development language for styling in antd.
- less-loader: compiler for translating less into css.
if you just want to change the color one time, here is a good article:
If you want to change it on runtime you need another package:
A good article of using antd-theme-generator:
I've made an article on using antd-theme-webpack-plugin:
Related