From 98552c8124691014b07eecbc95191268eb15080f Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 20 Jan 2018 21:09:04 -0500
Subject: [PATCH] scss

---
 package.json         | 4 ++--
 src/app/app.d.ts     | 1 +
 src/app/main.ts      | 2 ++
 src/scss/styles.scss | 6 ++++++
 webpack.dev.js       | 4 ++--
 5 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 src/scss/styles.scss

diff --git a/package.json b/package.json
index b9ae48c2a1..e5b8e752a3 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
     "font-awesome": "4.7.0",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
-    "less": "^3.0.0-alpha.3",
-    "less-loader": "^4.0.5",
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
     "ts-loader": "^3.0.5",
     "tslint": "^5.8.0",
diff --git a/src/app/app.d.ts b/src/app/app.d.ts
index 7bf7506fcf..23de474bee 100644
--- a/src/app/app.d.ts
+++ b/src/app/app.d.ts
@@ -1 +1,2 @@
 declare module '*.html';
+declare function require(s: string): any;
diff --git a/src/app/main.ts b/src/app/main.ts
index 87aa2a76be..bc3ef6b900 100644
--- a/src/app/main.ts
+++ b/src/app/main.ts
@@ -1,6 +1,8 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
+require('../scss/styles.scss');
+
 import { AppModule } from './app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
new file mode 100644
index 0000000000..d4795a00fc
--- /dev/null
+++ b/src/scss/styles.scss
@@ -0,0 +1,6 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background-color: gray;
+}
diff --git a/webpack.dev.js b/webpack.dev.js
index b2ff1b5782..71ddcebe48 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -6,7 +6,7 @@ module.exports = merge(common, {
     module: {
         rules: [
             {
-                test: /\.less$/,
+                test: /\.scss$/,
                 use: [
                     {
                         loader: 'style-loader'
@@ -15,7 +15,7 @@ module.exports = merge(common, {
                         loader: 'css-loader',
                     },
                     {
-                        loader: 'less-loader',
+                        loader: 'sass-loader',
                     }
                 ]
             }