From cf4ff04e40cf8108f95159320825bd68a2177d8f Mon Sep 17 00:00:00 2001
From: Ben Burlingham <ben.burlingham@gmail.com>
Date: Mon, 28 Mar 2016 06:57:28 -1000
Subject: [PATCH] SASS integration with webpack.

---
 index.html          |  3 +--
 js/Character.js     |  2 ++
 package.json        |  3 ++-
 sass/character.scss |  5 +++--
 webpack.config.js   | 15 ++++++++++++++-
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 1060f90..44dabbf 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <title>Document</title>
     <script src="https://fb.me/react-0.14.7.js"></script>
     <script src="https://fb.me/react-dom-0.14.7.js"></script>
+    <link rel="stylesheet" href="style.css"></link>
 
     <style>
         * {
@@ -13,9 +14,7 @@
         }
 
         .ourhero {
-            background: aqua;
             height:100px;
-            opacity:0.5;
             position:absolute;
             width:100px;
         }
diff --git a/js/Character.js b/js/Character.js
index 62301bc..0b73434 100644
--- a/js/Character.js
+++ b/js/Character.js
@@ -1,6 +1,8 @@
 var React = require('react');
 var Input = require('./Input');
 
+require('../sass/character.scss');
+
 var character = React.createClass({
     getInitialState: function() {
         return {
diff --git a/package.json b/package.json
index e622872..1e862c5 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "MECC's classic Number Munchers game rebuilt with React and Webpack.",
   "main": "./js/main.js",
   "scripts": {
-    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors --hot"
+    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors"
   },
   "author": "Ben Burlingham",
   "license": "ISC",
@@ -15,6 +15,7 @@
   "devDependencies": {
     "css-loader": "^0.23.1",
     "express": "^4.13.4",
+    "extract-text-webpack-plugin": "^1.0.1",
     "jsx-loader": "^0.13.2",
     "node-sass": "^3.4.2",
     "react": "^0.14.7",
diff --git a/sass/character.scss b/sass/character.scss
index cc0aa96..ac4c1d8 100644
--- a/sass/character.scss
+++ b/sass/character.scss
@@ -1,5 +1,6 @@
-.character {
-    $bg: crimson;
+.ourhero {
+    $bg: aqua;
 
     background: $bg;
+    opacity: 0.5;
 }
diff --git a/webpack.config.js b/webpack.config.js
index c58556c..210f6a6 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,6 @@
 // http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
 function getEntrySources() {
     var sources = [
         './js/main.js'
@@ -21,6 +23,11 @@ module.exports = {
                 test: /\.js$/,
                 include: __dirname + '/js',
                 loaders: ['babel']
+            },
+            {
+                test: /\.scss$/,
+                include: __dirname + '/sass',
+                loader: ExtractTextPlugin.extract('css!sass')
             }
         ]
     },
@@ -28,5 +35,11 @@ module.exports = {
     output: {
         path: __dirname,
         filename: 'bundle.js'
-    }
+    },
+
+    plugins: [
+        new ExtractTextPlugin('style.css', {
+            allChunks: true
+        })
+    ]
 };