Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gatsby-plugin-antd with all npm packages installed. Try it out:

var gatsbyPluginAntd = require("gatsby-plugin-antd")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gatsby-plugin-antd v2.0.2

Gatsby plugin to use Ant Design

npm package

gatsby-plugin-antd

Use Ant Design with Gatsby

Install

npm install antd gatsby-plugin-antd --save

for v1

npm install antd gatsby-plugin-antd^1.0.0 --save

How to use

  1. 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

  1. 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>
  1. It will pull in the component and the relevant css file using babel-plugin-import

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free