How to use webpack with antd

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.

user_13273905 · Answer

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*/
}

How to use webpack with antd

1 Answers