How to custom Ant Design theme?

[sukechris]

I want to custom ant design theme by its document(https://ant.design/docs/react/customize-theme), here is:

If you import styles by specifying the style option of babel-plugin-import, change it from css to true, which will import the less version of antd.

so I change the .babelrc ["import", { libraryName: "antd", style: true }]],

then I modify the less-loader of webpack.config.js, so I can use modifyVars to custome my theme

loaders: {
    less: {
      enable: true,
      test: /\.less/,
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        modifyVars: {'primary-color': '#1DA57A'}
      }
    }
  },

however, it doesn't work, here is error messages:

2018-04-22 10:09:57,802 ERROR 57327 [-/10.183.76.232/-/232ms GET /] nodejs.SyntaxError: Invalid or unexpected token
(function (exports, require, module, __filename, __dirname) { @import "./themes/default";
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/anonymous/projects/egg-react/node_modules/antd/lib/layout/style/index.js:3:1)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)

Any help would be appreciated!

[q1998763]

@sukechris Hi, were you able to solve this issue?