vercel · timneutkens · Mar 15, 2017 · Mar 3, 2017 · Mar 6, 2017 · Mar 6, 2017
diff --git a/examples/with-external-scoped-css/.babelrc b/examples/with-external-scoped-css/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "css-modules-transform", {
+        "extensions": [".css", ".sass"],
+        "extractCss": "./static/css/bundle.css",
+        "preprocessCss": "./pre-processor.js"
+      }
+    ]
+  ]
+}
diff --git a/examples/with-external-scoped-css/.gitignore b/examples/with-external-scoped-css/.gitignore
@@ -0,0 +1 @@
+static
diff --git a/examples/with-external-scoped-css/README.md b/examples/with-external-scoped-css/README.md
@@ -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
+
+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 :/ 
+- Sometimes cache come in and you need to reload with (shift + r) to clear and got the new css file version
diff --git a/examples/with-external-scoped-css/package.json b/examples/with-external-scoped-css/package.json
@@ -0,0 +1,17 @@
+{
+  "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"
+  }
+}
diff --git a/examples/with-external-scoped-css/pages/_document.js b/examples/with-external-scoped-css/pages/_document.js
@@ -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>
+    )
+  }
+}
diff --git a/examples/with-external-scoped-css/pages/index.js b/examples/with-external-scoped-css/pages/index.js
@@ -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
diff --git a/examples/with-external-scoped-css/pages/index.sass b/examples/with-external-scoped-css/pages/index.sass
@@ -0,0 +1,4 @@
+.example
+  font-size: 36px
+  width: 300px
+  margin: 100px auto
diff --git a/examples/with-external-scoped-css/pre-processor.js b/examples/with-external-scoped-css/pre-processor.js
@@ -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')
+}