scss

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",

src/app/app.d.ts

@@ -1 +1,2 @@
 declare module '*.html';
+declare function require(s: string): any;

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);

src/scss/styles.scss

@@ -0,0 +1,6 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background-color: gray;
+}

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',
                     }
                 ]
             }