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

Changed code to use the new css & asset imports instead of loading the whole lib from CDN (#3884)

Browse source 
* Changed code to use the new css & asset imports instead of loading the whole lib from CDN.

* Fixed formatting.
This commit is contained in:
Rob 2018-02-25 18:57:20 +01:00 committed by Tim Neutkens
parent 1a51d11e2e
commit 681c055220
4 changed files with 38 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/with-semantic-ui/README.md
View file

@ -37,5 +37,4 @@ now
## The idea behind the example
This example shows how to use Next.js along with [Semantic UI React](http://react.semantic-ui.com). This is intended to show the integration of this
UI toolkit with the Framework,
This example shows how to use Next.js along with [Semantic UI React](http://react.semantic-ui.com) including handling of external styles and assets. This is intended to show the integration of this UI toolkit with the Framework.

20
examples/with-semantic-ui/next.config.js Normal file
View file

@ -0,0 +1,20 @@
const withCss = require('@zeit/next-css')
module.exports = withCss({
webpack (config) {
config.module.rules.push({
test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
publicPath: './',
outputPath: 'static/',
name: '[name].[ext]'
}
}
})
return config
}
})

6
examples/with-semantic-ui/package.json
View file

@ -7,10 +7,14 @@
"start": "next start"
},
"dependencies": {
"@zeit/next-css": "^0.1.2",
"file-loader": "^1.1.9",
"next": "latest",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.68.0"
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.78.2",
"url-loader": "^0.6.2"
},
"license": "ISC"
}

14
examples/with-semantic-ui/pages/index.js
View file

@ -1,10 +1,18 @@
import 'semantic-ui-css/components/modal.css'
import 'semantic-ui-css/components/header.css'
import 'semantic-ui-css/components/button.css'
import 'semantic-ui-css/components/list.css'
import 'semantic-ui-css/components/icon.css'
import 'semantic-ui-css/themes/default/assets/fonts/icons.eot'
import 'semantic-ui-css/themes/default/assets/fonts/icons.woff'
import 'semantic-ui-css/themes/default/assets/fonts/icons.woff2'
import { Modal, Header, Button, List, Icon } from 'semantic-ui-react'
import Head from 'next/head'
import { Modal, Header, Button, List } from 'semantic-ui-react'
export default () => (
<div>
<Head>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css' />
<link rel='stylesheet' href='/_next/static/style.css' />
</Head>
<Modal trigger={<Button>Show Modal</Button>}>
<Modal.Header>Select a Photo</Modal.Header>
@ -34,5 +42,7 @@ export default () => (
</List.Content>
</List.Item>
</List>
Hello <Icon name='world' />
</div>
)