support scss

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.
       {

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.

package.json

@@ -65,13 +65,15 @@
     "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",
     "postcss-loader": "0.9.1",
     "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",

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() {

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