SASS integration with webpack.

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;
         }

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 {

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",

sass/character.scss

@@ -1,5 +1,6 @@
-.character {
-    $bg: crimson;
+.ourhero {
+    $bg: aqua;
 
     background: $bg;
+    opacity: 0.5;
 }

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
+        })
+    ]
 };