Customizing Ant Design theme

1
votes

Im following the official docs but it is not working for me. I installed the less, less-loader and customize-cra and then I added config-overrides.js go the root directory of React app. The config-overrides.js looks like this:

import { addLessLoader, fixBabelImports, override } from 'customize-cra'

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#1DA57A',
      '@link-color': '#1DA57A',
      '@success-color': '#1DA57A',
      '@warning-color': '#1DA57A',
      '@error-color': '#1DA57A'
    }
  })
)

The colors in the app are still default Ant Design colors. What am I missing, please?

Thank you.

2
reactjsthemesantd

2 Answers

3
votes

The documentation on antd/antd-mobile is incorrect. You need to perform the fixBabelImports as follows:

// config-overrides.js
const {
    override,
    disableEsLint,
    addLessLoader,
    fixBabelImports
} = require('customize-cra');

module.exports = override(
    fixBabelImports('antd-mobile', {
            libraryDirectory: 'es',
            libraryName: 'antd-mobile',
            style: true
    }),
    fixBabelImports('antd', {
        libraryDirectory: 'es',
        libraryName: 'antd',
        style: true
    }),
    disableEsLint(),
    addLessLoader({
        javascriptEnabled: true
    })
);
0
votes

You can try changing the first line to:

    const { override, fixBabelImports, addLessLoader } = require("customize-cra");

If that doesn't work, make sure you installed babel-plugin-import and react-app-rewired, then change the following

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },