diff --git a/.gitignore b/.gitignore
index 0d501b76e3..9762e63c55 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,6 +52,7 @@ npm-debug.log
 /src/*/dist/
 /dist/**
 .webpack.json
+*.bak
 
 # Doc #
 /doc/
diff --git a/README.md b/README.md
index bc7f54cbb4..9f85292adc 100644
--- a/README.md
+++ b/README.md
@@ -308,6 +308,8 @@ import * as _ from 'lodash';
  * check out https://github.com/cnpm/cnpm
 * If you're looking to add Angular 2 Material Design
  * check out the [material2](https://github.com/AngularClass/angular2-webpack-starter/tree/material2) branch
+* If you're looking Sass/Scss support
+ * check out the [sass-support](https://github.com/AngularClass/angular2-webpack-starter/tree/sass-support) branch
 * node-pre-gyp ERR in npm install (Windows)
  * install Python x86 version between 2.5 and 3.0 on windows see issue [#626](https://github.com/AngularClass/angular2-webpack-starter/issues/626)
 * `Error:Error: Parse tsconfig error [{"messageText":"Unknown compiler option 'lib'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'strictNullChecks'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'baseUrl'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'paths'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'types'.","category":1,"code":5023}]`
diff --git a/config/webpack.common.js b/config/webpack.common.js
index 6def934dda..d8b492bb8e 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -13,6 +13,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
 const HtmlElementsPlugin = require('./html-elements-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /*
  * Webpack Constants
@@ -44,7 +45,7 @@ module.exports = {
    *
    * See: http://webpack.github.io/docs/configuration.html#cache
    */
-   //cache: false,
+  //cache: false,
 
   /*
    * The entry point for the bundle
@@ -55,8 +56,8 @@ module.exports = {
   entry: {
 
     'polyfills': './src/polyfills.browser.ts',
-    'vendor':    './src/vendor.browser.ts',
-    'main':      './src/main.browser.ts'
+    'vendor': './src/vendor.browser.ts',
+    'main': './src/main.browser.ts'
 
   },
 
@@ -145,6 +146,20 @@ module.exports = {
         loader: 'json-loader'
       },
 
+      /*
+       * ExtractTextPlugin, style loader and css loader support for global *.css files
+       * Inject css files as globally in a bundle
+       *
+       */
+      {
+        test: /\.css$/,
+        exclude: helpers.root('src', 'app'),
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: 'css-loader?-url'
+        })
+      },
+
       /*
        * to string and css loader support for *.css files
        * Returns file content as string
@@ -152,7 +167,8 @@ module.exports = {
        */
       {
         test: /\.css$/,
-        loaders: ['to-string-loader', 'css-loader']
+        include: helpers.root('src', 'app'),
+        loaders: ['exports-loader?module.exports.toString()', 'css-loader?-url']
       },
 
       /* Raw loader support for *.html
@@ -167,9 +183,9 @@ module.exports = {
       },
 
       /* File loader for supporting images, for example, in CSS files.
-      */
+       */
       {
-        test: /\.(jpg|png|gif)$/,
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
         loader: 'file'
       }
     ]
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
index 7442a06b31..b24ec0f4a4 100644
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@@ -10,6 +10,7 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
  * Webpack Plugins
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /**
  * Webpack Constants
@@ -52,7 +53,7 @@ module.exports = webpackMerge(commonConfig, {
    * See: http://webpack.github.io/docs/configuration.html#devtool
    * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
    */
-  devtool: 'cheap-module-source-map',
+  devtool: 'cheap-module-eval-source-map',
 
   /**
    * Options affecting the output of the compilation.
@@ -116,6 +117,14 @@ module.exports = webpackMerge(commonConfig, {
         'HMR': METADATA.HMR,
       }
     }),
+
+    /**
+     * Plugin: ExtractTextPlugin
+     * Description: Load css file separately in a bundle
+     *
+     * See: https://github.com/webpack/extract-text-webpack-plugin
+     */
+    new ExtractTextPlugin('[name].css'),
   ],
 
   /**
diff --git a/config/webpack.prod.js b/config/webpack.prod.js
index 1f2ec53c5e..06436da24e 100644
--- a/config/webpack.prod.js
+++ b/config/webpack.prod.js
@@ -16,6 +16,7 @@ const IgnorePlugin = require('webpack/lib/IgnorePlugin');
 const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 const WebpackMd5Hash = require('webpack-md5-hash');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /**
  * Webpack Constants
@@ -157,8 +158,8 @@ module.exports = webpackMerge(commonConfig, {
 
 
       beautify: false, //prod
-      mangle: { screw_ie8 : true }, //prod
-      compress: { screw_ie8: true }, //prod
+      mangle: {screw_ie8: true}, //prod
+      compress: {screw_ie8: true}, //prod
       comments: false //prod
     }),
 
@@ -174,6 +175,14 @@ module.exports = webpackMerge(commonConfig, {
       helpers.root('config/modules/angular2-hmr-prod.js')
     ),
 
+    /**
+     * Plugin: ExtractTextPlugin
+     * Description: Load css file separately in a bundle
+     *
+     * See: https://github.com/webpack/extract-text-webpack-plugin
+     */
+    new ExtractTextPlugin('[name].[hash].css'),
+
     /**
      * Plugin: IgnorePlugin
      * Description: Don’t generate modules for requests matching the provided RegExp.
diff --git a/config/webpack.test.js b/config/webpack.test.js
index 80cbcdef6f..29edff67cc 100644
--- a/config/webpack.test.js
+++ b/config/webpack.test.js
@@ -9,6 +9,7 @@ const helpers = require('./helpers');
  */
 const ProvidePlugin = require('webpack/lib/ProvidePlugin');
 const DefinePlugin = require('webpack/lib/DefinePlugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /**
  * Webpack Constants
@@ -86,10 +87,11 @@ module.exports = {
         test: /\.js$/,
         loader: 'source-map-loader',
         exclude: [
-        // these packages have problems with their sourcemaps
-        helpers.root('node_modules/rxjs'),
-        helpers.root('node_modules/@angular')
-      ]}
+          // these packages have problems with their sourcemaps
+          helpers.root('node_modules/rxjs'),
+          helpers.root('node_modules/@angular')
+        ]
+      }
 
     ],
 
@@ -128,7 +130,21 @@ module.exports = {
        *
        * See: https://github.com/webpack/json-loader
        */
-      { test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')] },
+      {test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')]},
+
+      /**
+       * ExtractTextPlugin, style loader and css loader support for global *.css files
+       * Inject css files as globally in a bundle
+       *
+       */
+      {
+        test: /\.css$/,
+        exclude: [helpers.root('src/index.html'), helpers.root('src', 'app')],
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: 'css-loader?-url'
+        })
+      },
 
       /**
        * Raw loader support for *.css files
@@ -136,7 +152,7 @@ module.exports = {
        *
        * See: https://github.com/webpack/raw-loader
        */
-      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'], exclude: [helpers.root('src/index.html')] },
+      {test: /\.css$/, loaders: ['exports-loader?module.exports.toString()', 'css-loader?-url'], include: helpers.root('src', 'app')},
 
       /**
        * Raw loader support for *.html
@@ -144,7 +160,7 @@ module.exports = {
        *
        * See: https://github.com/webpack/raw-loader
        */
-      { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] }
+      {test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')]}
 
     ],
 
@@ -200,6 +216,14 @@ module.exports = {
       }
     }),
 
+    /**
+     * Plugin: ExtractTextPlugin
+     * Description: Load css file separately in a bundle
+     *
+     * See: https://github.com/webpack/extract-text-webpack-plugin
+     */
+    new ExtractTextPlugin('[name].css'),
+
 
   ],
 
diff --git a/package.json b/package.json
index 4ee399861c..eeb5f9ece0 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "es6-promise-loader": "^1.0.1",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta.3",
     "file-loader": "^0.9.0",
     "gh-pages": "^0.11.0",
     "html-webpack-plugin": "^2.21.0",
@@ -115,6 +116,7 @@
     "remap-istanbul": "^0.6.3",
     "rimraf": "^2.5.2",
     "source-map-loader": "^0.1.5",
+    "string-replace-loader": "^1.0.3",
     "style-loader": "^0.13.1",
     "to-string-loader": "^1.1.4",
     "ts-helpers": "1.1.1",
diff --git a/src/app/+detail/index.ts b/src/app/+detail/index.ts
index e7e720c3eb..3f2c745384 100644
--- a/src/app/+detail/index.ts
+++ b/src/app/+detail/index.ts
@@ -1,4 +1,4 @@
-import { BrowserModule } from '@angular/platform-browser'
+import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b174f58a3c..9c56c7e6b9 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -11,7 +11,6 @@ import { AppState } from './app.service';
  */
 @Component({
   selector: 'app',
-  encapsulation: ViewEncapsulation.None,
   styleUrls: [
     './app.style.css'
   ],
diff --git a/src/app/app.style.css b/src/app/app.style.css
index 2fc581c0aa..1d78771128 100644
--- a/src/app/app.style.css
+++ b/src/app/app.style.css
@@ -1,8 +1,3 @@
-html, body{
-  height: 100%;
-  font-family: Arial, Helvetica, sans-serif
-}
-
 span.active {
   background-color: gray;
 }
diff --git a/src/main.browser.ts b/src/main.browser.ts
index a58f4b6414..9124d45c0f 100644
--- a/src/main.browser.ts
+++ b/src/main.browser.ts
@@ -5,6 +5,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { decorateModuleRef } from './app/environment';
 import { ApplicationRef } from '@angular/core';
 import { bootloader } from '@angularclass/hmr';
+
+/*
+ * Global styles
+ */
+import './styles/style.css';
+
 /*
  * App Module
  * our top level module that holds all of our components
diff --git a/src/styles/style.css b/src/styles/style.css
new file mode 100644
index 0000000000..5489dd9e9f
--- /dev/null
+++ b/src/styles/style.css
@@ -0,0 +1,16 @@
+html, body {
+  height: 100%;
+  font-family: Arial, Helvetica, sans-serif
+}
+
+body:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  opacity: 0.02;
+  background-image: url(../assets/img/angular-logo.png);
+}