From ace8c9d33eeee2e1d822563e02c8ba69217afffa Mon Sep 17 00:00:00 2001
From: vladkampov <v@kampov.com>
Date: Thu, 9 Feb 2017 11:56:47 +0200
Subject: [PATCH] SASS compatibility implemented in react-scripts

---
 .../config/webpack.config.dev.js              | 14 ++++++++++-
 .../config/webpack.config.prod.js             | 19 +++++++++++++++
 packages/react-scripts/template/src/App.css   | 24 -------------------
 packages/react-scripts/template/src/App.js    |  2 +-
 packages/react-scripts/template/src/App.scss  | 24 +++++++++++++++++++
 packages/react-scripts/template/src/index.js  |  2 +-
 .../template/src/{index.css => index.scss}    |  0
 7 files changed, 58 insertions(+), 27 deletions(-)
 delete mode 100644 packages/react-scripts/template/src/App.css
 create mode 100644 packages/react-scripts/template/src/App.scss
 rename packages/react-scripts/template/src/{index.css => index.scss} (100%)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index ac63ba2f38c..3423c1d892c 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/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.
       {
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 7181c4ccae4..1eae6862d12 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/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.
       {
diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.css
deleted file mode 100644
index 15adfdc710c..00000000000
--- a/packages/react-scripts/template/src/App.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.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); }
-}
diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js
index d7d52a7f38a..1ae6587936c 100644
--- a/packages/react-scripts/template/src/App.js
+++ b/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() {
diff --git a/packages/react-scripts/template/src/App.scss b/packages/react-scripts/template/src/App.scss
new file mode 100644
index 00000000000..0b4abe85d85
--- /dev/null
+++ b/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); }
+}
diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js
index 54c5ef1a427..632344e450f 100644
--- a/packages/react-scripts/template/src/index.js
+++ b/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 />,
diff --git a/packages/react-scripts/template/src/index.css b/packages/react-scripts/template/src/index.scss
similarity index 100%
rename from packages/react-scripts/template/src/index.css
rename to packages/react-scripts/template/src/index.scss