Add with-external-styled-jsx-sass (#5618)

because of this https://twitter.com/rem/status/1059563246007566336

examples/with-external-styled-jsx-sass/README.md

@@ -0,0 +1,50 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-external-styled-jsx-sass)
+
+# Example app with next-sass
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-external-styled-jsx-sass with-external-styled-jsx-sass-app
+# or
+yarn create next-app --example with-external-styled-jsx-sass with-external-styled-jsx-sass-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-external-styled-jsx-sass
+cd with-external-styled-jsx-sass
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Run production build with:
+
+```bash
+npm run build
+npm run start
+# or
+yarn build
+yarn start
+```
+
+## The idea behind the example
+
+This example features:
+
+An app with external CSS written in SASS and loaded and automatically scoped with `styled-jsx/webpack`. [Learn more](https://github.com/zeit/styled-jsx#styles-in-regular-css-files)

examples/with-external-styled-jsx-sass/next.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  webpack: (config, { defaultLoaders }) => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        defaultLoaders.babel,
+        {
+          loader: require('styled-jsx/webpack').loader,
+          options: {
+            type: 'scoped'
+          }
+        },
+        'sass-loader'
+      ]
+    })
+
+    return config
+  }
+}

examples/with-external-styled-jsx-sass/package.json

@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "node-sass": "^4.7.2",
+    "sass-loader": "7.1.0"
+  }
+}

examples/with-external-styled-jsx-sass/pages/index.js

@@ -0,0 +1,7 @@
+import styles from '../styles/style.scss'
+
+export default () =>
+  <div>
+    Hello World!
+    <style jsx>{styles}</style>
+  </div>

examples/with-external-styled-jsx-sass/styles/style.scss

@@ -0,0 +1,8 @@
+$color: #2ecc71;
+
+div {
+  background-color: $color;
+  :hover {
+    background-color: darken($color, 20%);
+  }
+}