Add and configure sass-loader

Author: lexun

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

@@ -147,11 +147,19 @@ module.exports = function(publicPath) {
       // "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.
-      // ZEAL: Add support for CSS Modules
+      // ZEAL: Add support for CSS Modules and SASS
       {
         test: /\.css$/,
         loader: 'style!css?importLoaders=1&modules=1!postcss'
       },
+      {
+        test: /\.scss$/,
+        loaders: [
+          'style',
+          'css?modules&importLoaders=1' +
+            '&localIdentName=[path][local]__[hash:base64:5]!sass'
+        ]
+      },
       // JSON is not enabled by default in Webpack but both Node and Browserify
       // allow it implicitly so we also enable it.
       {

packages/react-scripts/package.json

@@ -53,13 +53,15 @@
     "http-proxy-middleware": "0.17.2",
     "jest": "16.0.2",
     "json-loader": "0.5.4",
+    "node-sass": "^3.13.0",
     "object-assign": "4.1.0",
     "path-exists": "2.1.0",
     "postcss-loader": "1.0.0",
     "promise": "7.1.1",
     "react-dev-utils": "^0.3.0",
     "recursive-readdir": "2.1.0",
     "rimraf": "2.5.4",
+    "sass-loader": "^4.0.2",
     "strip-ansi": "3.0.1",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",