add global stylesheet example (vercel#1016)

davibe · timneutkens · commit 19f11255203b · 2017-02-12T00:22:35.000+01:00
* add global stylesheet example

* fix avoiding html-escape of stylesheets

* update readme

* remove .gitignore
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 <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"
+  }
+}
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;
+}
