请问如何设定 Ant Design的主题颜色？

[zlxu1984]

想使用Ant Design控件，但是官方文档两种方法试着配了下都没有用，能否提供具体的配置方法？

[zlxu1984]

补充一下，在使用Ant控件的时候，想使用less，在webpack.config.js里面loaders把less设置成true，发现报错，错报在了ant的lib里面，试了几种配置方法都没有用。

[ItxiaoDz]

我也遇到了同样的问题

[hubcarl]

能提供一下 less 错误嘛？ 或者给一个 git 代码看看 @ItxiaoDz @zlxu1984

[hubcarl]

工程里面有个例子：https://github.com/hubcarl/egg-react-webpack-boilerplate/blob/master/app/web/page/ant/tab/tab.jsx

[sukechris]

I have the same situation.

I want to custom ant design theme by its officail 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 are 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!

[beijipc]

我也碰到了相同的问题，有解决办法吗？

我使用的定制方式是：（1）theme 属性 https://ant.design/docs/react/customize-theme-cn

.babelrc ["import", { libraryName: "antd", style: true }]]

报错信息很长，只能截部分

[hubcarl]

参考这个问题的解决办法：https://github.com/beijipc/easy-react-spa-ssr

• webpack.config.js 配置

less: {
      options: {
        modifyVars: theme,
        javascriptEnabled: true
      }
}

• babelrc

["import", [{ "libraryName": "antd", "style": true }]]改成 ["import", [{ "libraryName": "antd", "style": "true" }]]

• 引入样式

  // 按需引入
  import 'antd/lib/button/style/index.less'
  // 全局引入
  import 'antd/dist/antd.less'

[hubcarl]

ant design 主题设置问题我查资料也会有相关问题，具体需要验证一下。按官方文档配置是都生效了

[hubcarl]

@zlxu1984 @ItxiaoDz @sukechris @beijipc 已支持 antd 主题定制和按需加载 ，包括服务端渲染和前端徐然。具体见分支代码：https://github.com/easy-team/egg-react-webpack-boilerplate/tree/antd-theme