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

Example to create next application with scoped/external css. (#1340)

Browse source 
* First structure for external css example

* Remove: Builded files

* Fix: Identation to 2 spaces

* Fix example

* Fix lint

* Fix: Review points
This commit is contained in:
Guilherme Diego 2017-03-15 11:21:48 -03:00 committed by Tim Neutkens
parent 13ccf78498
commit 123a635f00
8 changed files with 100 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
examples/with-external-scoped-css/.babelrc Normal file
View file

@ -0,0 +1,12 @@
{
"presets": ["next/babel"],
"plugins": [
[
"css-modules-transform", {
"extensions": [".css", ".sass"],
"extractCss": "./static/css/bundle.css",
"preprocessCss": "./pre-processor.js"
}
]
]
}

1
examples/with-external-scoped-css/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
static

18
examples/with-external-scoped-css/README.md Normal file
View file

@ -0,0 +1,18 @@
## Scoped Style with external CSS file
The motivation for this example is using scoped css from external files and in the end generate a compiled static `.css` file to use in production..
#### Running That
```
yarn install
yarn start
```
#### Supported Langs
The plugin supports the `less`, `scss` and `css` file extensions. It is possible to add support for another pre-processor by creating a function to compile the code. In the example we use `sass` as our css pre-processor
To edit the types you need to go to `.babelrc`
#### Attention Points
- Next.js doesn't have support for watching `*.css files. So you will have to edit a Javascript file to re-compile the css. In the future this will be fixed by [#823](https://github.com/zeit/next.js/pull/823).

21
examples/with-external-scoped-css/package.json Normal file
View file

@ -0,0 +1,21 @@
{
"name": "with-external-scoped-css",
"version": "1.0.0",
"main": "index.js",
"license": "ISC",
"author": "",
"scripts": {
"start": "next",
"build": "next build",
"run": "next start"
},
"dependencies":{
"next": "^2.0.0-beta",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-plugin-css-modules-transform": "^1.2.1",
"node-sass": "^4.5.0",
}
}

24
examples/with-external-scoped-css/pages/_document.js Normal file
View file

@ -0,0 +1,24 @@
import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) {
const {html, head} = renderPage()
return { html, head }
}
render () {
return (
<html>
<Head>
<link rel='stylesheet' href='/static/css/bundle.css' />
</Head>
<body>
{this.props.customValue}
<Main />
<NextScript />
</body>
</html>
)
}
}

10
examples/with-external-scoped-css/pages/index.js Normal file
View file

@ -0,0 +1,10 @@
import React from 'react'
import ss from './index.sass'
export const IndexPage = () => (
<div className={ss.example}>
This is an example from scoped style in a outside CSS file {'<3'}
</div>
)
export default IndexPage

4
examples/with-external-scoped-css/pages/index.sass Normal file
View file

@ -0,0 +1,4 @@
.example
font-size: 36px
width: 300px
margin: 100px auto

10
examples/with-external-scoped-css/pre-processor.js Normal file
View file

@ -0,0 +1,10 @@
const sass = require('node-sass')
module.exports = (data, filename) => {
return sass.renderSync({
data,
file: filename,
indentedSyntax: true,
outputStyle: 'compressed'
}).css.toString('utf8')
}