How to use webpack with antd - reactjs

Question

I try to customize a theme of antd with webpack.config.js, but I don't understand how it works. I want to customize the CSS with less-loader.
I follow this link
I have a `webpack.config.js :
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
options: {
lessOptions: { // If you are using less-loader#5 please spread the lessOptions to options directly
modifyVars: {
'font-size-base': '140px'
},
javascriptEnabled: true,
},
},
}],
}],
}
But the font size base doesn't change anyway.
Note: I develop a React application with TypeScript.

Answer 1

npm install craco-less --save
in my package.json (for craco less add this):
{
"dependencies": {
"#craco/craco": "^5.6.4",
"craco-less": "^1.17.0"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
"devDependencies": {
"less": "^4.0.0",
"less-loader": "^7.2.1"
}
}
At the root of the project i had a craco.config.js :
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '#primary-color': 'rgba(0, 0, 0, 0.87);' },
javascriptEnabled: true,
},
},
},
},
],
};
If you want to modify the theme indicate the modification in modifyVars
Vars of antd : https://ant.design/docs/react/customize-theme#Ant-Design-Less-variables
And in my react component i had :
import './competenceGrid.less';
The competenceGrid.less :
#import '~antd/dist/antd.less';
/*some css*/
}