Adds .scss support with sass-loader, node-sass, and a simple webpack config edit.

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.

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$/,

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$/,

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

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.css → template/src/App.scss

@@ -1,18 +1,21 @@
+$dark-gray: #222;
+
 .App {
   text-align: center;
+  .App-header {
+    background-color: $dark-gray;
+    height: 150px;
+    padding: 20px;
+    color: white;
+  }
 }
 
 .App-logo {
   animation: spin infinite 20s linear;
   height: 80px;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
+
 
 .App-intro {
   font-size: large;