Customising Ant.design theme

.babelrc

{
  "env": {
    "test": {
      "plugins": [
        /* DON'T SET import Plugin for unit test environment if you're using JEST */
      ]
    },
    "development": {
      "plugins": [
        ["import", { "libraryName": "antd", "libraryDirectory": "es"}]
      ]
    },
    "production": {
      "plugins": [
        ["import", { "libraryName": "antd", "libraryDirectory": "es"}]
      ]
    }
  }
}

README.md

npm install --save-dev less less-loader css-loader style-loader

package.json ``json { "scripts": { "test": "set BABEL_ENV=test&& jest", "watch": "set BABEL_ENV=development&& webpack --watch -d", "build": "set BABEL_ENV=production&& webpack -p --config ./webpack.prod.config.js", } }

ant.less

@import "~antd/dist/antd.less";
@import "my.ant.theme.scss";

App.jsx

import './themes/ant.less';

my.ant.theme.scss

$font-family: Source Sans Pro;

sassVarsToLess.js

module.exports = function (source) {
    return source.replace(/\$/ig, '@');
};

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = env => {
    return {
    /*
    OTHER CONFIGURATION
    */
    module: {
        rules: [
            /* OTHER RULES */
            {
                test: /\.css$/, 
                use: ['style-loader', 'css-loader'] 
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { 
                    loader: "less-loader",
                    options: {
                        javascriptEnabled: true
                    }
                    }
                ]
            },
            {
                test: /\.scss$/,
                issuer: {
                  exclude: /\.less$/,
                }
            },
            {
                test: /\.scss$/,
                issuer: /\.less$/,
                use: {
                    loader: './sassVarsToLess.js'
                }
            }
        ]
    }
}
};