-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Example to create next application with scoped/external css. #1340
Changes from 5 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
{ | ||
"presets": ["next/babel"], | ||
"plugins": [ | ||
[ | ||
"css-modules-transform", { | ||
"extensions": [".css", ".sass"], | ||
"extractCss": "./static/css/bundle.css", | ||
"preprocessCss": "./pre-processor.js" | ||
} | ||
] | ||
] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
static |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
## 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 `.css` on static to use in the final application. | ||
|
||
#### Running That | ||
|
||
``` | ||
yarn install | ||
yarn start | ||
``` | ||
|
||
#### Supported Langs | ||
The plugin supports `less`, `scss` and `css` extension. Is possible using another pre-processor creating a function to compile the code. In the example I use `sass` as my css' pre processor | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The plugin supports the |
||
|
||
To edit the types you need to go to `.babelrc` | ||
|
||
|
||
#### Problems | ||
- Next haven't support to auto-reload in files that not be JS and JSX, this is frutasting, so you need to edit something on JS to compile your css :/ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
- Sometimes cache come in and you need to reload with (shift + r) to clear and got the new css file version | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I believe this line can be removed. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Removed not, maybe change "Problems" to something like "Attention Points" and link you PR/Advertisement @timneutkens There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I mean
People know how to refresh their browser when something doesn't work 😄 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could you make this file line with https://github.com/zeit/next.js/blob/master/examples/basic-css/package.json
Also
|
||
"name": "test-css", | ||
"version": "1.0.0", | ||
"main": "index.js", | ||
"license": "MIT", | ||
"author": "Guilherme Diego <guidiego.expgames@gmail.com>", | ||
"scripts": { | ||
"start": "next" | ||
}, | ||
"devDependencies": { | ||
"babel-plugin-css-modules-transform": "^1.2.1", | ||
"next": "^2.0.0-beta.17", | ||
"node-sass": "^4.5.0", | ||
"react": "^15.4.2", | ||
"react-dom": "^15.4.2" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
.example | ||
font-size: 36px | ||
width: 300px | ||
margin: 100px auto |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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') | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
in the end generate a compiled static
.css
file to use in production.