From c7ec4aba0d07cd5d92c750e2ff669d9270c150e1 Mon Sep 17 00:00:00 2001
From: Michael Knoch <info@michaelknoch.de>
Date: Tue, 30 Aug 2016 21:41:53 +0200
Subject: [PATCH 1/5] install dependencies

---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 74d3e73..56778a1 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,10 @@
   "homepage": "https://github.com/alicoding/react-webpack-babel#readme",
   "dependencies": {
     "bootstrap": "^4.0.0-alpha.3",
+    "node-sass": "^3.8.0",
     "react": "15.3.0",
-    "react-dom": "15.3.0"
+    "react-dom": "15.3.0",
+    "sass-loader": "^4.0.0"
   },
   "devDependencies": {
     "babel-core": "6.13.2",

From 5328695b8a1c39efe4f05bfb213c57180fc9bdd8 Mon Sep 17 00:00:00 2001
From: Michael Knoch <info@michaelknoch.de>
Date: Tue, 30 Aug 2016 21:42:09 +0200
Subject: [PATCH 2/5] configure webpack for loading sass

---
 webpack.config.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 95f22e3..dd617b7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,10 +17,11 @@ loaders.push({
 });
 // local css modules
 loaders.push({
-	test: /[\/\\]src[\/\\].*\.css$/,
+	test: /[\/\\]src[\/\\].*\.scss/,
 	loaders: [
 		'style?sourceMap',
-		'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
+		'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
+		'sass'
 	]
 });
 

From b8360aac9b5b26d04cd7dfd28966882775864162 Mon Sep 17 00:00:00 2001
From: Michael Knoch <info@michaelknoch.de>
Date: Tue, 30 Aug 2016 21:42:20 +0200
Subject: [PATCH 3/5] modify example

---
 src/index.jsx                 | 2 +-
 src/{index.css => index.scss} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{index.css => index.scss} (100%)

diff --git a/src/index.jsx b/src/index.jsx
index b38d98f..56dc1eb 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,5 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import styles from './index.css';
+import styles from './index.scss';
 import React from 'react';
 import { render } from 'react-dom';
 
diff --git a/src/index.css b/src/index.scss
similarity index 100%
rename from src/index.css
rename to src/index.scss

From f3c961a8482a4a37f507aee11500659df6cecac4 Mon Sep 17 00:00:00 2001
From: Michael Knoch <info@michaelknoch.de>
Date: Tue, 30 Aug 2016 22:13:21 +0200
Subject: [PATCH 4/5] load sass when building production

---
 webpack.production.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webpack.production.config.js b/webpack.production.config.js
index 36c589f..cf33152 100644
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@@ -7,8 +7,8 @@ var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 
 // local css modules
 loaders.push({
-	test: /[\/\\]src[\/\\].*\.css$/,
-	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
+	test: /[\/\\]src[\/\\].*\.scss/,
+	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass')
 });
 // global css files
 loaders.push({

From cd8d3571ce1262bcaf4983500d3593e999df19f0 Mon Sep 17 00:00:00 2001
From: Michael Knoch <info@michaelknoch.de>
Date: Tue, 30 Aug 2016 22:57:12 +0200
Subject: [PATCH 5/5] add loader for css again

---
 webpack.config.js            | 11 ++++++++++-
 webpack.production.config.js |  6 ++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/webpack.config.js b/webpack.config.js
index dd617b7..c73c415 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,7 +15,7 @@ loaders.push({
 		'css'
 	]
 });
-// local css modules
+// local scss modules
 loaders.push({
 	test: /[\/\\]src[\/\\].*\.scss/,
 	loaders: [
@@ -25,6 +25,15 @@ loaders.push({
 	]
 });
 
+// local css modules
+loaders.push({
+	test: /[\/\\]src[\/\\].*\.css/,
+	loaders: [
+		'style?sourceMap',
+		'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
+	]
+});
+
 module.exports = {
 	entry: [
 		`webpack-dev-server/client?http://${HOST}:${PORT}`,
diff --git a/webpack.production.config.js b/webpack.production.config.js
index cf33152..645c9e1 100644
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@@ -6,6 +6,12 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 
 // local css modules
+loaders.push({
+	test: /[\/\\]src[\/\\].*\.css/,
+	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
+});
+
+// local scss modules
 loaders.push({
 	test: /[\/\\]src[\/\\].*\.scss/,
 	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass')