add global stylesheet example (vercel#1016)

* add global stylesheet example * fix avoiding html-escape of stylesheets * update readme * remove .gitignore
lucalanca · Feb 11, 2017 · 19f1125 · 19f1125
1 parent faef6e4
commit 19f1125
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 0 deletions.
diff --git a/examples/with-global-stylesheet/.babelrc b/examples/with-global-stylesheet/.babelrc
@@ -0,0  1,14 @@
 {
   "plugins": [
     [
       "wrap-in-js",
       {
         "extensions": ["css$", "scss$"]
       }
     ]
   ],
   "presets": [
     "next/babel"
   ],
   "ignore": []
 }
diff --git a/examples/with-global-stylesheet/README.md b/examples/with-global-stylesheet/README.md
@@ -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
diff --git a/examples/with-global-stylesheet/example.gif b/examples/with-global-stylesheet/example.gif
diff --git a/examples/with-global-stylesheet/next.config.js b/examples/with-global-stylesheet/next.config.js
@@ -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
   }
 }
diff --git a/examples/with-global-stylesheet/package.json b/examples/with-global-stylesheet/package.json
@@ -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 <[email protected]>",
   "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"
   }
 }
diff --git a/examples/with-global-stylesheet/pages/index.js b/examples/with-global-stylesheet/pages/index.js
@@ -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>
diff --git a/examples/with-global-stylesheet/pages/style.css b/examples/with-global-stylesheet/pages/style.css
@@ -0,0  1,4 @@
 p {
   font-size: xx-large;
   color: black;
 }
diff --git a/examples/with-global-stylesheet/pages/style.scss b/examples/with-global-stylesheet/pages/style.scss
@@ -0,0  1,6 @@
 $primary-color: black;
 
 p {
   font-size: xx-large;
   color: $primary-color;
 }