add support for sass :)

next.config.js

@@ -2,19 +2,23 @@ module.exports = {
   webpack: (config, { dev }) => {
     config.module.rules.push(
       {
-        test: /\.css/,
+        test: /\.(css|scss)/,
         loader: "emit-file-loader",
         options: {
           name: 'dist/[path][name].[ext]'
         }
       }
     ,
       {
-        test: /\.css/,
+        test: /\.css$/,
         loader: "babel-loader!raw-loader"
       }
+    ,
+      {
+        test: /\.scss$/,
+        loader: "babel-loader!raw-loader!sass-loader"
+      }
     )
-    // console.log(config.module.rules)
     return config
   }
 }

package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "babel-plugin-wrap-in-js": "^1.1.0",
     "next": "^2.0.0-beta.18",
-    "raw-loader": "^0.5.1"
+    "node-sass": "^4.4.0",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^4.1.1"
   },
   "devDependencies": {
     "now": "^3.1.0"

pages/index.js

@@ -1,7 +1,9 @@
 import React from 'react'
 import fetch from 'isomorphic-fetch'
 
-import style from './style.css'
+import style from './style.scss'
+// or, if you work with plain css
+// import style from './style.css'
 
 export default () =>
   <div>

pages/style.scss

@@ -0,0 +1,6 @@
+$primary-color: black;
+
+p {
+  font-size: xx-large;
+  color: $primary-color;
+}