mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
add global stylesheet example (#1016)
* add global stylesheet example * fix avoiding html-escape of stylesheets * update readme * remove .gitignore
This commit is contained in:
parent
faef6e48e0
commit
19f1125520
14
examples/with-global-stylesheet/.babelrc
Normal file
14
examples/with-global-stylesheet/.babelrc
Normal file
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"plugins": [
|
||||
[
|
||||
"wrap-in-js",
|
||||
{
|
||||
"extensions": ["css$", "scss$"]
|
||||
}
|
||||
]
|
||||
],
|
||||
"presets": [
|
||||
"next/babel"
|
||||
],
|
||||
"ignore": []
|
||||
}
|
44
examples/with-global-stylesheet/README.md
Normal file
44
examples/with-global-stylesheet/README.md
Normal file
|
@ -0,0 +1,44 @@
|
|||
# Global Stylesheet example
|
||||
|
||||
This is an example of how you can include a global stylesheet in a next.js webapp.
|
||||
|
||||
|
||||
## How to use
|
||||
|
||||
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||
|
||||
```bash
|
||||
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-global-stylesheet
|
||||
cd with-global-stylesheet
|
||||
```
|
||||
|
||||
To get this example running you just need to
|
||||
|
||||
npm install .
|
||||
npm run dev
|
||||
|
||||
Visit [http://localhost:300](http://localhost:300) and try to modify `pages/style.scss` changing color. Your changes should be picked up instantly.
|
||||
|
||||
Also see it working with plain css here
|
||||
![example](example.gif)
|
||||
|
||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
||||
|
||||
```bash
|
||||
now
|
||||
```
|
||||
|
||||
|
||||
## The idea behind the example
|
||||
|
||||
The strategy here is to transpile the stylesheet file to a css-in-js file so that it can be loaded and hot reloaded both on the server and the client. For this purpose i created a babel loader plugin called [babel-loader-wrap-in-js](https://github.com/davibe/babel-plugin-wrap-in-js)
|
||||
|
||||
This project shows how you can set it up. Have a look at
|
||||
- .babelrc
|
||||
- next.config.js
|
||||
- pages/style.scss
|
||||
- pages/index.js
|
||||
|
||||
|
||||
Please, report any issue on enhancement related to this example to its original
|
||||
github repository https://github.com/davibe/next.js-css-global-style-test
|
BIN
examples/with-global-stylesheet/example.gif
Normal file
BIN
examples/with-global-stylesheet/example.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 140 KiB |
24
examples/with-global-stylesheet/next.config.js
Normal file
24
examples/with-global-stylesheet/next.config.js
Normal file
|
@ -0,0 +1,24 @@
|
|||
module.exports = {
|
||||
webpack: (config, { dev }) => {
|
||||
config.module.rules.push(
|
||||
{
|
||||
test: /\.(css|scss)/,
|
||||
loader: 'emit-file-loader',
|
||||
options: {
|
||||
name: 'dist/[path][name].[ext]'
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: 'babel-loader!raw-loader'
|
||||
}
|
||||
,
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loader: 'babel-loader!raw-loader!sass-loader'
|
||||
}
|
||||
)
|
||||
return config
|
||||
}
|
||||
}
|
22
examples/with-global-stylesheet/package.json
Normal file
22
examples/with-global-stylesheet/package.json
Normal file
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "next.js-css-global-style-test",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"author": "Davide Bertola <dade@dadeb.it>",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"babel-plugin-wrap-in-js": "^1.1.0",
|
||||
"next": "^2.0.0-beta.18",
|
||||
"node-sass": "^4.4.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"sass-loader": "^4.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"now": "^3.1.0"
|
||||
}
|
||||
}
|
11
examples/with-global-stylesheet/pages/index.js
Normal file
11
examples/with-global-stylesheet/pages/index.js
Normal file
|
@ -0,0 +1,11 @@
|
|||
import React from 'react'
|
||||
|
||||
import stylesheet from './style.scss'
|
||||
// or, if you work with plain css
|
||||
// import stylesheet from './style.css'
|
||||
|
||||
export default () =>
|
||||
<div>
|
||||
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
|
||||
<p>ciao</p>
|
||||
</div>
|
4
examples/with-global-stylesheet/pages/style.css
Normal file
4
examples/with-global-stylesheet/pages/style.css
Normal file
|
@ -0,0 +1,4 @@
|
|||
p {
|
||||
font-size: xx-large;
|
||||
color: black;
|
||||
}
|
6
examples/with-global-stylesheet/pages/style.scss
Normal file
6
examples/with-global-stylesheet/pages/style.scss
Normal file
|
@ -0,0 +1,6 @@
|
|||
$primary-color: black;
|
||||
|
||||
p {
|
||||
font-size: xx-large;
|
||||
color: $primary-color;
|
||||
}
|
Loading…
Reference in a new issue