
Craco Ant Design Plugin
This is a craco plugin that makes it easy to use the Ant Design UI library with create-react-app version >= 2. This includes:
- Less (provided by craco-less)
babel-plugin-import
to only import the required CSS, instead of everything- A nicer way to customize the theme. Save your modified variables in
antd.customize.json
Installation
First, follow the beginning of the Ant Design create-react-app
Documentation to set up your app with Ant Design.
(Stop before the "Advanced Guides" section, because this plugin handles all of that for you.)
Then, follow the craco
Installation Instructions to install the craco
package, create a craco.config.js
file, and modify the scripts in your package.json
.
Then install craco-antd
:
$ yarn add craco-antd
$ npm i -S craco-antd
Usage
Here is a complete craco.config.js
configuration file that sets up Less compilation and babel-plugin-import
for create-react-app
:
const CracoAntDesignPlugin = require("craco-antd");
module.exports = {
plugins: [{ plugin: CracoAntDesignPlugin }]
};
Ant Design also allows you to customize the theme by modifying the Less variables.
View Ant Design's "Customize Theme" documentation
craco-antd
will look for a antd.customize.json
file in the root directory of your project. If this file is found, the contents will be merged into the modifyVars
option for less-loader
. For example:
{
"@primary-color": "#1DA57A",
"@link-color": "#1DA57A",
"@border-radius-base": "2px"
}
You can also customize these variables in craco.config.js
with the customizeTheme
option:
const CracoAntDesignPlugin = require("craco-antd");
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
customizeTheme: {
"@primary-color": "#1DA57A",
"@link-color": "#1DA57A",
"@border-radius-base": "2px"
}
}
}
]
};
(customizeTheme
is just an alias for the modifyVars
option in less-loader
.)
Finally, you can pass a lessLoaderOptions
object if you want full control over the less-loader
options:
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
lessLoaderOptions: {
modifyVars: { "@primary-color": "#1DA57A" },
strictMath: true,
noIeCompat: true
}
}
}
]
};
View the less-loader Documentation.
If you use more than one of these options to customize the theme, they are merged together in the following order:
antd.customize.json
options.customizeTheme
options.lessLoaderOptions.modifyVars
That's it! Now you can customize the Ant Design theme, and you can also compile Less files in your own app.
If you need to configure anything else for the webpack build, take a look at the
Configuration Overview section in the craco
README. You can use CracoAntDesignPlugin
while making other changes to babel
and webpack
, etc.