diff --git a/package.json b/package.json
index b9ae48c2..e5b8e752 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 7bf7506f..23de474b 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 87aa2a76..bc3ef6b9 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 00000000..d4795a00
--- /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 b2ff1b57..71ddcebe 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',
                     }
                 ]
             }