diff --git a/examples/with-ant-design-less/.babelrc b/examples/with-ant-design-less/.babelrc new file mode 100644 index 00000000..5da018ea --- /dev/null +++ b/examples/with-ant-design-less/.babelrc @@ -0,0 +1,13 @@ +{ + "presets": ["next/babel"], + "plugins": [ + "transform-decorators-legacy", + [ + "import", + { + "libraryName": "antd", + "style": "less" + } + ] + ] +} diff --git a/examples/with-ant-design-less/README.md b/examples/with-ant-design-less/README.md new file mode 100644 index 00000000..34da6437 --- /dev/null +++ b/examples/with-ant-design-less/README.md @@ -0,0 +1,44 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-ant-design-less) + +# Ant Design example + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example: + +```bash +npx create-next-app --example with-ant-design-less with-ant-design-app +# or +yarn create next-app --example with-ant-design-less with-ant-design-app +``` + +### Download manually + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-ant-design-less +cd with-ant-design-less +``` + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework. diff --git a/examples/with-ant-design-less/asserts/antd-custom.less b/examples/with-ant-design-less/asserts/antd-custom.less new file mode 100644 index 00000000..027ab897 --- /dev/null +++ b/examples/with-ant-design-less/asserts/antd-custom.less @@ -0,0 +1,4 @@ +@primary-color: #1DA57A; + +@layout-header-height: 40px; +@border-radius-base: 0px; diff --git a/examples/with-ant-design-less/asserts/styles.less b/examples/with-ant-design-less/asserts/styles.less new file mode 100644 index 00000000..e2773cf9 --- /dev/null +++ b/examples/with-ant-design-less/asserts/styles.less @@ -0,0 +1,2 @@ +@import "~antd/dist/antd.less"; +@import "./antd-custom.less"; diff --git a/examples/with-ant-design-less/index.js b/examples/with-ant-design-less/index.js new file mode 100644 index 00000000..e462540b --- /dev/null +++ b/examples/with-ant-design-less/index.js @@ -0,0 +1,17 @@ +import Head from 'next/head' + +import './asserts/styles.less' + +export default ({ children }) => +