diff --git a/README.md b/README.md
index 2156f661ba5..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 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.
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;