terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

improved ant-design with less (#5847)

Browse source 
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.
This commit is contained in:
Bill Searle 2018-12-10 22:20:01 +11:00 committed by Tim Neutkens
parent 8b6173917a
commit 77d5f36eea
6 changed files with 58 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/with-ant-design-less/.babelrc
View file

@ -3,8 +3,7 @@
"plugins": [
["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
[
"import",
{
"import", {
"libraryName": "antd",
"style": true
}

2
examples/with-ant-design-less/asserts/styles.less
View file

@ -1,2 +0,0 @@
@import "~antd/dist/antd.less";
@import "./antd-custom.less";

0
examples/with-ant-design-less/asserts/antd-custom.less → examples/with-ant-design-less/assets/antd-custom.less
View file

16
examples/with-ant-design-less/index.js
View file

@ -1,16 +0,0 @@
import Head from 'next/head'
import './asserts/styles.less'
export default ({ children }) =>
<div>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta charSet='utf-8' />
</Head>
<style jsx global>{`
body {
}
`}</style>
{children}
</div>

2
examples/with-ant-design-less/next.config.js
View file

@ -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'
)
)

115
examples/with-ant-design-less/pages/index.js
View file

@ -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 () => (
<Layout>
<div style={{ marginTop: 100 }}>
<Form layout='horizontal'>
<FormItem
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>
<div style={{ marginTop: 100 }}>
<Form layout='horizontal'>
<FormItem
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>
<FormItem
label='Switch'
labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }}
>
<Switch defaultChecked name='switch' />
</FormItem>
<FormItem
label='Switch'
labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }}
>
<Switch defaultChecked name='switch' />
</FormItem>
<FormItem
label='Slider'
labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }}
>
<Slider defaultValue={70} />
</FormItem>
<FormItem
label='Slider'
labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }}
>
<Slider defaultValue={70} />
</FormItem>
<FormItem
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>
<Option value='disabled' disabled>disabled</Option>
<Option value='yiminghe'>yiminghe</Option>
</Select>
</FormItem>
<FormItem
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>
<Option value='disabled' disabled>disabled</Option>
<Option value='yiminghe'>yiminghe</Option>
</Select>
</FormItem>
<FormItem
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 size='large' style={{ marginLeft: 8 }}>
Cancel
</Button>
</FormItem>
</Form>
</div>
</Layout>
<FormItem
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 size='large' style={{ marginLeft: 8 }}>
Cancel
</Button>
</FormItem>
</Form>
</div>
)