Use Ant Design with Gatsby
npm install antd gatsby-plugin-antd --save
- Include the plugin in your
gatsby-config.js
file.
// in gatsby-config.js
plugins: [
'gatsby-plugin-antd'
]
// or if you want to use less
plugins: [
{
resolve: 'gatsby-plugin-antd',
options: {
style: true
}
}
]
note: if you are using less then you need to install less
- In your component(s) include the Ant Design component using dynamic imports as suggested here https://ant.design/docs/react/getting-started#Import-on-Demand
// in your component
import { Button } from 'antd'
export default () => <Button type="primary">Primary</Button>
- It will pull in the component and the relevant css file using babel-plugin-import