From 706be55c75df7e01e5e2657bdfb62834ddc385a7 Mon Sep 17 00:00:00 2001
From: komcal <kom.sujautra@gmail.com>
Date: Wed, 10 Aug 2016 01:20:20 +0700
Subject: [PATCH] support scss

---
 config/webpack.config.dev.js  |  5 +++++
 config/webpack.config.prod.js |  5 +++++
 package.json                  |  2 ++
 template/src/App.js           |  2 +-
 template/src/App.scss         | 20 ++++++++++++++++++++
 5 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 template/src/App.scss

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index ae95e0d92b..58d704d98f 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -115,6 +115,11 @@ module.exports = {
         include: [paths.appSrc, paths.appNodeModules],
         loader: 'style!css!postcss'
       },
+      {
+        test: /\.scss$/,
+        include: [paths.appSrc, paths.appNodeModules],
+        loader: 'style!css!sass'
+      },
       // JSON is not enabled by default in Webpack but both Node and Browserify
       // allow it implicitly so we also enable it.
       {
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 66ca7a8cec..c37b4f98f1 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -126,6 +126,11 @@ module.exports = {
         loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
       },
+      {
+        test: /\.scss$/,
+        include: [paths.appSrc, paths.appNodeModules],
+        loader: 'style!css!sass'
+      },
       {
         // JSON is not enabled by default in Webpack but both Node and Browserify
         // allow it implicitly so we also enable it.
diff --git a/package.json b/package.json
index 4b83b1343f..522a7a6e60 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "http-proxy-middleware": "0.17.0",
     "jest": "14.1.0",
     "json-loader": "0.5.4",
+    "node-sass": "^3.8.0",
     "object-assign": "4.1.0",
     "opn": "4.0.2",
     "path-exists": "3.0.0",
@@ -72,6 +73,7 @@
     "promise": "7.1.1",
     "recursive-readdir": "2.0.0",
     "rimraf": "2.5.4",
+    "sass-loader": "^4.0.0",
     "strip-ansi": "3.0.1",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
diff --git a/template/src/App.js b/template/src/App.js
index d7d52a7f38..1ae6587936 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.scss b/template/src/App.scss
new file mode 100644
index 0000000000..7cbce4e04c
--- /dev/null
+++ b/template/src/App.scss
@@ -0,0 +1,20 @@
+.App {
+  text-align: center;
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+    height: 80px;
+  }
+  .App-header {
+    background-color: #222;
+    height: 150px;
+    padding: 20px;
+    color: white;
+  }
+  .App-intro {
+    font-size: large;
+  }
+}
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
\ No newline at end of file