diff --git a/examples/with-ant-design/.babelrc b/examples/with-ant-design/.babelrc
index 0a0cd952..647afcc4 100644
--- a/examples/with-ant-design/.babelrc
+++ b/examples/with-ant-design/.babelrc
@@ -6,7 +6,7 @@
       "import",
       {
         "libraryName": "antd",
-        "style": false
+        "style": "css"
       }
     ]
   ]
diff --git a/examples/with-ant-design/index.js b/examples/with-ant-design/index.js
index ec9e13dc..06ac9a7a 100644
--- a/examples/with-ant-design/index.js
+++ b/examples/with-ant-design/index.js
@@ -4,7 +4,7 @@ export default ({ children }) =>
     <Head>
       <meta name='viewport' content='width=device-width, initial-scale=1' />
       <meta charSet='utf-8' />
-      <link rel='stylesheet' href='https://unpkg.com/antd@3/dist/antd.min.css' />
+      <link rel='stylesheet' href='/_next/static/style.css' />
     </Head>
     <style jsx global>{`
       body {
diff --git a/examples/with-ant-design/next.config.js b/examples/with-ant-design/next.config.js
new file mode 100644
index 00000000..7adc9659
--- /dev/null
+++ b/examples/with-ant-design/next.config.js
@@ -0,0 +1,8 @@
+const withCss = require('@zeit/next-css')
+
+// fix: prevents error when .css files are required by node
+if (typeof require !== 'undefined') {
+  require.extensions['.css'] = (file) => {}
+}
+
+module.exports = withCss()
diff --git a/examples/with-ant-design/package.json b/examples/with-ant-design/package.json
index 3d3a6596..b70b5571 100644
--- a/examples/with-ant-design/package.json
+++ b/examples/with-ant-design/package.json
@@ -7,7 +7,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "antd": "^3.0.2",
+    "@zeit/next-css": "^0.1.4",
+    "antd": "^3.3.1",
     "babel-plugin-import": "^1.1.1",
     "next": "latest",
     "react": "^16.0.0",
diff --git a/examples/with-ant-design/pages/index.js b/examples/with-ant-design/pages/index.js
index 4f5a2d8e..01625c35 100644
--- a/examples/with-ant-design/pages/index.js
+++ b/examples/with-ant-design/pages/index.js
@@ -12,7 +12,7 @@ export default () => (
           label='Input Number'
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 8 }}
-      >
+        >
           <InputNumber size='large' min={1} max={10} style={{ width: 100 }} defaultValue={3} name='inputNumber' />
           <a href='#'>Link</a>
         </FormItem>
@@ -21,7 +21,7 @@ export default () => (
           label='Switch'
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 8 }}
-      >
+        >
           <Switch defaultChecked name='switch' />
         </FormItem>
 
@@ -29,7 +29,7 @@ export default () => (
           label='Slider'
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 8 }}
-      >
+        >
           <Slider defaultValue={70} />
         </FormItem>
 
@@ -37,7 +37,7 @@ export default () => (
           label='Select'
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 8 }}
-      >
+        >
           <Select size='large' defaultValue='lucy' style={{ width: 192 }} name='select'>
             <Option value='jack'>jack</Option>
             <Option value='lucy'>lucy</Option>
@@ -50,19 +50,19 @@ export default () => (
           label='DatePicker'
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 8 }}
-      >
+        >
           <DatePicker name='startDate' />
         </FormItem>
         <FormItem
           style={{ marginTop: 48 }}
           wrapperCol={{ span: 8, offset: 8 }}
-      >
+        >
           <Button size='large' type='primary' htmlType='submit'>
           OK
-        </Button>
+          </Button>
           <Button size='large' style={{ marginLeft: 8 }}>
           Cancel
-        </Button>
+          </Button>
         </FormItem>
       </Form>
     </div>
