mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
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.
This commit is contained in:
parent
8b6173917a
commit
77d5f36eea
|
@ -3,8 +3,7 @@
|
|||
"plugins": [
|
||||
["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
|
||||
[
|
||||
"import",
|
||||
{
|
||||
"import", {
|
||||
"libraryName": "antd",
|
||||
"style": true
|
||||
}
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
@import "~antd/dist/antd.less";
|
||||
@import "./antd-custom.less";
|
|
@ -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>
|
|
@ -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'
|
||||
)
|
||||
)
|
||||
|
|
|
@ -1,11 +1,9 @@
|
|||
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
|
||||
|
@ -66,5 +64,4 @@ export default () => (
|
|||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
|
|
Loading…
Reference in a new issue