This package is a plugin for Graze that integrates Ant Design with a support for a custom theme.

The plugin will automatically generate your theme's CSS on the server. CSS is optimized for the generated markup using dropcss CSS cleaner.

Install the plugin using yarn:

$ yarn add graze-plugin-antd

or using npm:

$ npm install --save graze-plugin-antd

In graze.config.js:

export const plugins = [
  require('graze-plugin-antd')({})
]

Pass a theme property to the plugin options that requires your less theme file in graze.config.js:

export const plugins = [
  require('graze-plugin-antd')({
    theme: () => require('./src/my-theme.less')
  })
]

You'll need to add support for less files - install razzle-plugin-less:

$ yarn add razzle-plugin-less

Add less plugin to razzle.config.js:

module.exports = {
  plugins: [
    {
      name: 'less',
      options: {
        less: {
          javascriptEnabled: true,
        }
      }
    }
  ]
}

Now make sure to @import the antd.less file and override any of the default variables in src/my-theme.less:

@import "~antd/dist/antd.less"; // Load antd default styles

@primary-color: #6b48ff; // primary color for all components
@link-color: #6b48ff; // link color
@success-color: #e21134; // success state color
@warning-color: #faad14; // warning state color
@error-color: #ff501b; // error state color