From b592b5f062d5b81e5ea6f576f26cb96dfa590e83 Mon Sep 17 00:00:00 2001
From: Juwan Wheatley <datwheat@gmail.com>
Date: Fri, 22 Jul 2016 19:31:50 -0400
Subject: [PATCH 1/3] Adds .scss support with sass-loader, node-sass, and a
 simple webpack config tweak

---
 config/webpack.config.dev.js       |  4 ++--
 config/webpack.config.prod.js      |  4 ++--
 package.json                       |  2 ++
 template/src/App.js                |  2 +-
 template/src/{App.css => App.scss} | 15 +++++++++------
 5 files changed, 16 insertions(+), 11 deletions(-)
 rename template/src/{App.css => App.scss} (63%)

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 65b3936ccb8..bb3870b93b7 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -66,9 +66,9 @@ module.exports = {
         query: require('./babel.dev')
       },
       {
-        test: /\.css$/,
+        test: /\.s?css$/,
         include: srcPath,
-        loader: 'style!css!postcss'
+        loader: 'style!css!postcss!sass'
       },
       {
         test: /\.json$/,
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index f372286a279..65c9dbcfcb5 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -62,12 +62,12 @@ module.exports = {
         query: require('./babel.prod')
       },
       {
-        test: /\.css$/,
+        test: /\.s?css$/,
         include: srcPath,
         // Disable autoprefixer in css-loader itself:
         // https://github.com/webpack/css-loader/issues/281
         // We already have it thanks to postcss.
-        loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
+        loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss!sass')
       },
       {
         test: /\.json$/,
diff --git a/package.json b/package.json
index aed0d9fb586..a8bbcf5fce7 100644
--- a/package.json
+++ b/package.json
@@ -47,9 +47,11 @@
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "2.22.0",
     "json-loader": "0.5.4",
+    "node-sass": "^3.8.0",
     "opn": "4.0.2",
     "postcss-loader": "0.9.1",
     "rimraf": "2.5.3",
+    "sass-loader": "^4.0.0",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
     "webpack": "1.13.1",
diff --git a/template/src/App.js b/template/src/App.js
index d7d52a7f38a..1ae6587936c 100644
--- a/template/src/App.js
+++ b/template/src/App.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
-import './App.css';
+import './App.scss';
 
 class App extends Component {
   render() {
diff --git a/template/src/App.css b/template/src/App.scss
similarity index 63%
rename from template/src/App.css
rename to template/src/App.scss
index e9e6b88ac0b..a590a842630 100644
--- a/template/src/App.css
+++ b/template/src/App.scss
@@ -1,5 +1,13 @@
+$dark-gray: #222;
+
 .App {
   text-align: center;
+  .App-header {
+    background-color: $dark-gray;
+    height: 150px;
+    padding: 20px;
+    color: white;
+  }
 }
 
 .App-logo {
@@ -7,12 +15,7 @@
   height: 80px;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
+
 
 .App-intro {
   font-size: large;

From 1b747e0a36d8e26f4a2f88b909a75b91dea39937 Mon Sep 17 00:00:00 2001
From: Juwan Wheatley <datwheat@gmail.com>
Date: Fri, 22 Jul 2016 19:39:54 -0400
Subject: [PATCH 2/3] It adds scss support

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2156f661ba5..1890d4c2728 100644
--- a/README.md
+++ b/README.md
@@ -126,7 +126,7 @@ Some features are currently **not supported**:
 * Testing.
 * Some experimental syntax extensions (e.g. decorators).
 * CSS Modules.
-* LESS or Sass.
+* LESS
 * Hot reloading of components.
 
 Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration.

From a81c6f31e5b55ebfd24be1f1464f63a106009b6b Mon Sep 17 00:00:00 2001
From: Juwan Wheatley <datwheat@gmail.com>
Date: Fri, 22 Jul 2016 19:41:28 -0400
Subject: [PATCH 3/3] Stick to writing style

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1890d4c2728..b6c95e28cbb 100644
--- a/README.md
+++ b/README.md
@@ -126,7 +126,7 @@ Some features are currently **not supported**:
 * Testing.
 * Some experimental syntax extensions (e.g. decorators).
 * CSS Modules.
-* LESS
+* LESS.
 * Hot reloading of components.
 
 Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration.