Add Sass to Webpack build

package.json

@@ -17,17 +17,19 @@
     "@types/react": "0.14.39",
     "@types/react-dom": "0.14.17",
     "angular": "1.5.8",
-    "css-loader": "0.25.0",
     "ngreact": "0.3.0",
     "react": "15.3.2",
     "react-dom": "15.3.2",
-    "style-loader": "0.13.1",
     "typescript": "2.0.3"
   },
   "devDependencies": {
+    "css-loader": "0.25.0",
+    "node-sass": "3.10.1",
+    "sass-loader": "4.0.2",
     "source-map-loader": "0.1.5",
+    "style-loader": "0.13.1",
     "ts-loader": "0.9.5",
     "typings": "1.4.0",
-    "webpack": "1.13.2"
+    "webpack": "1.13.3"
   }
 }

static/css/directives/components/main.scss

@@ -0,0 +1 @@
+@import 'pages/repo-page/repo-page';

static/css/directives/components/pages/repo-page/repo-page.scss

@@ -0,0 +1 @@
+// Repo Page specific styles here

static/js/app.tsx

@@ -1,3 +1,7 @@
+// Import Styles
+import '../css/directives/components/main.scss';
+
+// Import Components
 import {rpDirectives as repoPage} from "./directives/components/pages/repo-page/main";
 
 // Init for each page

webpack.config.js

@@ -2,34 +2,24 @@ var webpack = require('webpack');
 var path = require("path");
 
 var config = {
-  /*
-   * The entry point to the application
-   */
   entry: ["./static/js/app.tsx"],
-
-  /*
-   * Output path of bundle
-   */
   output: {
     path: path.resolve(__dirname, "static/js/build"),
     filename: "bundle.js"
   },
-
-  /*
-   * specify files to search for
-   */
   resolve: {
     extensions: ["", ".ts", ".tsx", ".js"]
   },
   module: {
-    /*
-     * Regex associated with the loader
-     */
     loaders: [
       {
         test: /\.tsx?$/,
         loader: "ts-loader",
         exclude: /node_modules/
+      },
+      { 
+        test: /\.scss$/, 
+        loaders: ['style', 'css', 'sass'] 
       }
     ]
   }