mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Example to create next application with scoped/external css. (#1340)
* 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:
parent
13ccf78498
commit
123a635f00
12
examples/with-external-scoped-css/.babelrc
Normal file
12
examples/with-external-scoped-css/.babelrc
Normal 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
1
examples/with-external-scoped-css/.gitignore
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
static
|
18
examples/with-external-scoped-css/README.md
Normal file
18
examples/with-external-scoped-css/README.md
Normal 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
21
examples/with-external-scoped-css/package.json
Normal 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
24
examples/with-external-scoped-css/pages/_document.js
Normal 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
10
examples/with-external-scoped-css/pages/index.js
Normal 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
4
examples/with-external-scoped-css/pages/index.sass
Normal 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
10
examples/with-external-scoped-css/pre-processor.js
Normal 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')
|
||||||
|
}
|
Loading…
Reference in a new issue