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
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 -D craco-antd
# Or
$ npm i --save-dev craco-antd
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
Customize the theme 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 a nicer name for themodifyVars
option inless-loader
.)
If you need to pass any additional options to
less-loader
, you can pass these in alessLoaderOptions
object.
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.