https://github.com/ye-will/next-plugin-antd

A @zeit/next-less patch with full support for Ant Design, Less and CSS modules
https://github.com/ye-will/next-plugin-antd

ant-design css-modules less next-plugin nextjs

Last synced: 4 months ago
JSON representation

A @zeit/next-less patch with full support for Ant Design, Less and CSS modules

• Host: GitHub
• URL: https://github.com/ye-will/next-plugin-antd
• Owner: ye-will
• License: mit
• Archived: true
• Created: 2020-04-23T09:45:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-07-16T04:20:41.000Z (over 4 years ago)
• Last Synced: 2024-09-22T01:45:31.341Z (4 months ago)
• Topics: ant-design, css-modules, less, next-plugin, nextjs
• Language: JavaScript
• Homepage:
• Size: 14.6 KB
• Stars: 28
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Next.js & Ant Design (& Less) Made Easy

A [@zeit/next-less][next-less] patch with full support for Ant Design, Less and CSS modules

## Version compatibility

- for `antd: <4.0.0`, use `next-plugin-antd: ~0.1.3`

- for `antd: >=4.0.0`, use `next-plugin-antd: ^0.2.0`

## `create-next-app` example

```bash

npm init next-app -e https://github.com/ye-will/next-plugin-antd/tree/master/examples/with-ant-design-less with-ant-design-less

```

or

```

yarn create next-app -e https://github.com/ye-will/next-plugin-antd/tree/master/examples/with-ant-design-less with-ant-design-less

```

## Installation

```bash

npm install --save next-plugin-antd less antd

```

## Configuring

Create/Edit `next.config.js` in your project

```javascript

// next.config.js

const withPluginAntd = require("next-plugin-antd")

module.exports = withPluginAntd({

  /* config options here */

})

```

Add a `.babelrc`

```json

{

  "presets": ["next/babel"],

  "plugins": [

    [

      "import", {

        "libraryName": "antd",

        "style": true

      }

    ]

  ]

}

```

Congratulations 🎉🎉🎉

### Options

`antdThemeVariables`: [less-vars-to-js](https://github.com/michaeltaranto/less-vars-to-js) config to customize ant design theme

All @zeit/next-less [options][next-less] are supported, such as `cssModules`, `cssLoaderOptions`, `lessLoaderOptions`, `postcssLoaderOptions`

[next-less]: https://github.com/zeit/next-plugins/tree/master/packages/next-less