SASS compatibility implemented in react-scripts

packages/react-scripts/config/webpack.config.dev.js

@@ -126,7 +126,8 @@ module.exports = {
           /\.(js|jsx)$/,
           /\.css$/,
           /\.json$/,
-          /\.svg$/
+          /\.svg$/,
+          /(\.scss|\.sass)$/
         ],
         loader: 'url',
         query: {
@@ -159,6 +160,17 @@ module.exports = {
         test: /\.css$/,
         loader: 'style!css?importLoaders=1!postcss'
       },
+      // "sass" loader transpiling SASS to CSS.
+      // "postcss" loader applies autoprefixer to our CSS.
+      // "css" loader resolves paths in CSS and adds assets as dependencies.
+      // "style" loader turns CSS into JS modules that inject <style> tags.
+      // In production, we use a plugin to extract that CSS to a file, but
+      // in development "style" loader enables hot editing of CSS.
+      {
+        test: /(\.scss|\.sass)$/,
+        include: paths.appSrc,
+        loader: "style!css!postcss!sass?sourceMap"
+      }
       // JSON is not enabled by default in Webpack but both Node and Browserify
       // allow it implicitly so we also enable it.
       {

packages/react-scripts/config/webpack.config.prod.js

@@ -171,6 +171,25 @@ module.exports = {
         loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss')
         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
       },
+      // The notation here is somewhat confusing.
+      // "sass" loader transpiling SASS to CSS.
+      // "postcss" loader applies autoprefixer to our CSS.
+      // "css" loader resolves paths in CSS and adds assets as dependencies.
+      // "style" loader normally turns CSS into JS modules injecting <style>,
+      // but unlike in development configuration, we do something different.
+      // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
+      // (second argument), then grabs the result CSS and puts it into a
+      // separate file in our build process. This way we actually ship
+      // a single CSS file in production instead of JS code injecting <style>
+      // tags. If you use code splitting, however, any async bundles will still
+      // use the "style" loader inside the async code so CSS from them won't be
+      // in the main CSS file.
+      {
+        test: /(\.scss|\.sass)$/,
+        include: paths.appSrc,
+        loader: ExtractTextPlugin.extract('style', 'css!postcss!sass?sourceMap')
+        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+      },
       // JSON is not enabled by default in Webpack but both Node and Browserify
       // allow it implicitly so we also enable it.
       {

packages/react-scripts/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() {

packages/react-scripts/template/src/App.scss

@@ -0,0 +1,24 @@
+.App {
+  text-align: center;
+
+  &-logo {
+    animation: App-logo-spin infinite 20s linear;
+    height: 80px;
+  }
+
+  &-header {
+    background-color: #222;
+    height: 150px;
+    padding: 20px;
+    color: white;
+  }
+
+  &-intro {
+    font-size: large;
+  }
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

packages/react-scripts/template/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import './index.css';
+import './index.scss';
 
 ReactDOM.render(
   <App />,