Starting the development server... about antd-theme-webpack-plugin

[mzohaibqc]

try using this configuration with some updates as per your requirements

const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackAlias,
  addWebpackModuleRule,
  addWebpackPlugin,
} = require('customize-cra');
const path = require('path');
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');
const lessToJs = require('less-vars-to-js');
const fs = require('fs');

module.exports = override(
  config => ({
    ...config,
    output: {
      ...config.output,
      globalObject: 'this',
    },
  }),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addWebpackPlugin(
    new AntDesignThemePlugin({
      varFile: path.join(__dirname, './src/styles/variables.less'),
      mainLessFile: path.join(__dirname, './src/styles/index.less'),
      antDir: path.join(__dirname, './node_modules/antd'),
      stylesDir: path.join(__dirname, './src/styles'),
      themeVariables: Object.keys(
        lessToJs(
          fs.readFileSync(
            path.join(
              __dirname,
              './node_modules/antd/lib/style/themes/default.less',
            ),
            'utf8',
          ),
        ),
      ),
      // indexFileName: 'index.html',
      generateOnce: true,
    }),
  ),

  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      // '@primary-color': '#1da57a',
      '@font-size-base': '13px',
      // '@layout-header-background': '#fafafa',
      // '@menu-bg': '#fafafa',
      // '@layout-slider-background': '#f0f0f0',
      // '@layout-body-background': '#ffffff',
      // '@layout-trigger-background': '#7c7c7c',
    },
  })
);