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": [ "plugins": [
["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }], ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
[ [
"import", "import", {
{
"libraryName": "antd", "libraryName": "antd",
"style": true "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 // Where your antd-custom.less file lives
const themeVariables = lessToJS( const themeVariables = lessToJS(
fs.readFileSync( fs.readFileSync(
path.resolve(__dirname, './asserts/antd-custom.less'), path.resolve(__dirname, './assets/antd-custom.less'),
'utf8' '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' import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button } from 'antd'
const FormItem = Form.Item const FormItem = Form.Item
const Option = Select.Option const Option = Select.Option
export default () => ( export default () => (
<Layout> <div style={{ marginTop: 100 }}>
<div style={{ marginTop: 100 }}> <Form layout='horizontal'>
<Form layout='horizontal'> <FormItem
<FormItem label='Input Number'
label='Input Number' labelCol={{ span: 8 }}
labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}
wrapperCol={{ span: 8 }} >
> <InputNumber size='large' min={1} max={10} style={{ width: 100 }} defaultValue={3} name='inputNumber' />
<InputNumber size='large' min={1} max={10} style={{ width: 100 }} defaultValue={3} name='inputNumber' /> <a href='#'>Link</a>
<a href='#'>Link</a> </FormItem>
</FormItem>
<FormItem <FormItem
label='Switch' label='Switch'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }} wrapperCol={{ span: 8 }}
> >
<Switch defaultChecked name='switch' /> <Switch defaultChecked name='switch' />
</FormItem> </FormItem>
<FormItem <FormItem
label='Slider' label='Slider'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }} wrapperCol={{ span: 8 }}
> >
<Slider defaultValue={70} /> <Slider defaultValue={70} />
</FormItem> </FormItem>
<FormItem <FormItem
label='Select' label='Select'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }} wrapperCol={{ span: 8 }}
> >
<Select size='large' defaultValue='lucy' style={{ width: 192 }} name='select'> <Select size='large' defaultValue='lucy' style={{ width: 192 }} name='select'>
<Option value='jack'>jack</Option> <Option value='jack'>jack</Option>
<Option value='lucy'>lucy</Option> <Option value='lucy'>lucy</Option>
<Option value='disabled' disabled>disabled</Option> <Option value='disabled' disabled>disabled</Option>
<Option value='yiminghe'>yiminghe</Option> <Option value='yiminghe'>yiminghe</Option>
</Select> </Select>
</FormItem> </FormItem>
<FormItem <FormItem
label='DatePicker' label='DatePicker'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }} wrapperCol={{ span: 8 }}
> >
<DatePicker name='startDate' /> <DatePicker name='startDate' />
</FormItem> </FormItem>
<FormItem <FormItem
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
wrapperCol={{ span: 8, offset: 8 }} wrapperCol={{ span: 8, offset: 8 }}
> >
<Button size='large' type='primary' htmlType='submit'> <Button size='large' type='primary' htmlType='submit'>
OK OK
</Button> </Button>
<Button size='large' style={{ marginLeft: 8 }}> <Button size='large' style={{ marginLeft: 8 }}>
Cancel Cancel
</Button> </Button>
</FormItem> </FormItem>
</Form> </Form>
</div> </div>
</Layout>
) )