From 99626d907fa3842240f0888396a8bdaf552d7c65 Mon Sep 17 00:00:00 2001
From: Ian Minoso <iminoso@gmail.com>
Date: Wed, 2 Nov 2016 14:15:52 -0400
Subject: [PATCH] Add Sass to Webpack build

---
 package.json                                   |  8 +++++---
 static/css/directives/components/main.scss     |  1 +
 .../components/pages/repo-page/repo-page.scss  |  1 +
 static/js/app.tsx                              |  4 ++++
 webpack.config.js                              | 18 ++++--------------
 5 files changed, 15 insertions(+), 17 deletions(-)
 create mode 100644 static/css/directives/components/main.scss
 create mode 100644 static/css/directives/components/pages/repo-page/repo-page.scss

diff --git a/package.json b/package.json
index e9606a583..511a1549b 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/static/css/directives/components/main.scss b/static/css/directives/components/main.scss
new file mode 100644
index 000000000..2fe8e44da
--- /dev/null
+++ b/static/css/directives/components/main.scss
@@ -0,0 +1 @@
+@import 'pages/repo-page/repo-page';
diff --git a/static/css/directives/components/pages/repo-page/repo-page.scss b/static/css/directives/components/pages/repo-page/repo-page.scss
new file mode 100644
index 000000000..b5ce5fc36
--- /dev/null
+++ b/static/css/directives/components/pages/repo-page/repo-page.scss
@@ -0,0 +1 @@
+// Repo Page specific styles here
diff --git a/static/js/app.tsx b/static/js/app.tsx
index 21ccc5298..7378837ac 100644
--- a/static/js/app.tsx
+++ b/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
diff --git a/webpack.config.js b/webpack.config.js
index a3156acb8..633900093 100644
--- a/webpack.config.js
+++ b/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'] 
       }
     ]
   }