From 77d5f36eea94eb825568e641364e80f8a0ed261d Mon Sep 17 00:00:00 2001 From: Bill Searle Date: Mon, 10 Dec 2018 22:20:01 +1100 Subject: [PATCH] improved ant-design with less (#5847) Hey @timneutkens I've updated this example a bit. - Fixed `/asserts` spelling to `/assets`. - Removed the `/assets/styles.less` as importing this caused the entire ant-design css sheet to be loaded, now only the React components imported will have their styles loaded via the babel plugin which was already configured. Resulted in dropping the CSS for this example from ~630kb to ~220kb. - Removed `index.js` as it's not needed. --- examples/with-ant-design-less/.babelrc | 3 +- .../with-ant-design-less/asserts/styles.less | 2 - .../{asserts => assets}/antd-custom.less | 0 examples/with-ant-design-less/index.js | 16 --- examples/with-ant-design-less/next.config.js | 2 +- examples/with-ant-design-less/pages/index.js | 115 +++++++++--------- 6 files changed, 58 insertions(+), 80 deletions(-) delete mode 100644 examples/with-ant-design-less/asserts/styles.less rename examples/with-ant-design-less/{asserts => assets}/antd-custom.less (100%) delete mode 100644 examples/with-ant-design-less/index.js diff --git a/examples/with-ant-design-less/.babelrc b/examples/with-ant-design-less/.babelrc index 33360b17..e93c45f8 100644 --- a/examples/with-ant-design-less/.babelrc +++ b/examples/with-ant-design-less/.babelrc @@ -3,8 +3,7 @@ "plugins": [ ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }], [ - "import", - { + "import", { "libraryName": "antd", "style": true } diff --git a/examples/with-ant-design-less/asserts/styles.less b/examples/with-ant-design-less/asserts/styles.less deleted file mode 100644 index e2773cf9..00000000 --- a/examples/with-ant-design-less/asserts/styles.less +++ /dev/null @@ -1,2 +0,0 @@ -@import "~antd/dist/antd.less"; -@import "./antd-custom.less"; diff --git a/examples/with-ant-design-less/asserts/antd-custom.less b/examples/with-ant-design-less/assets/antd-custom.less similarity index 100% rename from examples/with-ant-design-less/asserts/antd-custom.less rename to examples/with-ant-design-less/assets/antd-custom.less diff --git a/examples/with-ant-design-less/index.js b/examples/with-ant-design-less/index.js deleted file mode 100644 index 1ff38756..00000000 --- a/examples/with-ant-design-less/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import Head from 'next/head' - -import './asserts/styles.less' - -export default ({ children }) => -
- - - - - - {children} -
diff --git a/examples/with-ant-design-less/next.config.js b/examples/with-ant-design-less/next.config.js index 146c45c0..81ab59c5 100644 --- a/examples/with-ant-design-less/next.config.js +++ b/examples/with-ant-design-less/next.config.js @@ -7,7 +7,7 @@ const path = require('path') // Where your antd-custom.less file lives const themeVariables = lessToJS( fs.readFileSync( - path.resolve(__dirname, './asserts/antd-custom.less'), + path.resolve(__dirname, './assets/antd-custom.less'), 'utf8' ) ) diff --git a/examples/with-ant-design-less/pages/index.js b/examples/with-ant-design-less/pages/index.js index 01625c35..6de24faa 100644 --- a/examples/with-ant-design-less/pages/index.js +++ b/examples/with-ant-design-less/pages/index.js @@ -1,70 +1,67 @@ -import Layout from '../index.js' import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button } from 'antd' const FormItem = Form.Item const Option = Select.Option export default () => ( - -
-
- - - Link - +
+ + + + Link + - - - + + + - - - + + + - - - + + + - - - - - - - - -
- + + + + + + + + +
)