diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index 5ec4c525c5..f9c908d028 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -79,6 +79,10 @@ module.exports = {
                 include: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: 'raw-loader'
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                 loader: 'file-loader?name=assets/[name].[hash].[ext]'
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 08469df2ef..6bb16ed94c 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -122,9 +122,11 @@
     "karma-remap-istanbul": "^0.6.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.2",
+    "node-sass": "^3.13.1",
     "null-loader": "^0.1.1",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.4",
+    "sass-loader": "6.0.2",
     "script-loader": "0.7.0",
     "source-map-loader": "^0.1.6",
     "sourcemap-istanbul-instrumenter-loader": "^0.2.0",
diff --git a/ng2-components/config/webpack.common.js b/ng2-components/config/webpack.common.js
index f05c4ec322..6bac7a59d0 100644
--- a/ng2-components/config/webpack.common.js
+++ b/ng2-components/config/webpack.common.js
@@ -74,7 +74,12 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            }, {
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-activiti-analytics/config/webpack.common.js b/ng2-components/ng2-activiti-analytics/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-activiti-analytics/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-analytics/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-activiti-analytics/config/webpack.test.js b/ng2-components/ng2-activiti-analytics/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-activiti-analytics/config/webpack.test.js
+++ b/ng2-components/ng2-activiti-analytics/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index cf97546ca1..0260af0553 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -108,7 +108,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "tag",
diff --git a/ng2-components/ng2-activiti-diagrams/config/webpack.common.js b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-activiti-diagrams/config/webpack.test.js b/ng2-components/ng2-activiti-diagrams/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-activiti-diagrams/config/webpack.test.js
+++ b/ng2-components/ng2-activiti-diagrams/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index e9325cb0df..2f7c44fe60 100644
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -99,7 +99,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "tag",
diff --git a/ng2-components/ng2-activiti-form/config/webpack.common.js b/ng2-components/ng2-activiti-form/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-activiti-form/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-form/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-activiti-form/config/webpack.test.js b/ng2-components/ng2-activiti-form/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-activiti-form/config/webpack.test.js
+++ b/ng2-components/ng2-activiti-form/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index 2eaa668290..a4e03ae0cf 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -106,7 +106,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-activiti-processlist/config/webpack.common.js b/ng2-components/ng2-activiti-processlist/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-activiti-processlist/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-processlist/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-activiti-processlist/config/webpack.test.js b/ng2-components/ng2-activiti-processlist/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-activiti-processlist/config/webpack.test.js
+++ b/ng2-components/ng2-activiti-processlist/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index 7914081163..87925ff1b8 100644
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -109,7 +109,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-activiti-tasklist/config/webpack.common.js b/ng2-components/ng2-activiti-tasklist/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-activiti-tasklist/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-tasklist/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-activiti-tasklist/config/webpack.test.js b/ng2-components/ng2-activiti-tasklist/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-activiti-tasklist/config/webpack.test.js
+++ b/ng2-components/ng2-activiti-tasklist/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index 44909fe9dc..794678407c 100644
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -112,7 +112,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-core/config/webpack.common.js b/ng2-components/ng2-alfresco-core/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-core/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-core/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-core/config/webpack.test.js b/ng2-components/ng2-alfresco-core/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-core/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-core/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index 0b96fb1ed0..0728050424 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -117,7 +117,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-datatable/config/webpack.common.js b/ng2-components/ng2-alfresco-datatable/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-datatable/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-datatable/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-datatable/config/webpack.test.js b/ng2-components/ng2-alfresco-datatable/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-datatable/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-datatable/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index 75c84ea3dd..e7e5ea8d52 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -104,7 +104,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js b/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-documentlist/config/webpack.test.js b/ng2-components/ng2-alfresco-documentlist/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-documentlist/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-documentlist/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index 05dfd9a5c8..98243c81a1 100644
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -113,7 +113,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-login/config/webpack.common.js b/ng2-components/ng2-alfresco-login/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-login/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-login/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-login/config/webpack.test.js b/ng2-components/ng2-alfresco-login/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-login/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-login/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index 58cb974c0a..be99f6b6b5 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -115,7 +115,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-search/config/webpack.common.js b/ng2-components/ng2-alfresco-search/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-search/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-search/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-search/config/webpack.test.js b/ng2-components/ng2-alfresco-search/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-search/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-search/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index 6aa7fc2442..ba54f7584b 100644
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -114,7 +114,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-social/config/webpack.common.js b/ng2-components/ng2-alfresco-social/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-social/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-social/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-social/config/webpack.test.js b/ng2-components/ng2-alfresco-social/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-social/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-social/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index 19bb270372..2506b747b0 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -92,7 +92,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "rating",
diff --git a/ng2-components/ng2-alfresco-tag/config/webpack.common.js b/ng2-components/ng2-alfresco-tag/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-tag/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-tag/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-tag/config/webpack.test.js b/ng2-components/ng2-alfresco-tag/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-tag/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-tag/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index 6f531c7887..996b1ecf6a 100644
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -92,7 +92,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "tag",
diff --git a/ng2-components/ng2-alfresco-upload/config/webpack.common.js b/ng2-components/ng2-alfresco-upload/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-upload/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-upload/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-upload/config/webpack.test.js b/ng2-components/ng2-alfresco-upload/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-upload/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-upload/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index 5baf9bead1..784e798780 100644
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -113,7 +113,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js b/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-userinfo/config/webpack.test.js b/ng2-components/ng2-alfresco-userinfo/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-userinfo/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-userinfo/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index 2da1d4dd7d..c6d89f1993 100644
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -92,7 +92,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "userinfo",
diff --git a/ng2-components/ng2-alfresco-viewer/config/webpack.common.js b/ng2-components/ng2-alfresco-viewer/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-viewer/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-viewer/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-viewer/config/webpack.test.js b/ng2-components/ng2-alfresco-viewer/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-viewer/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-viewer/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index 0fd3e7b8dc..4511d14cea 100644
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -108,7 +108,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-webscript/config/webpack.common.js b/ng2-components/ng2-alfresco-webscript/config/webpack.common.js
index 52a680e87e..b9614b724c 100644
--- a/ng2-components/ng2-alfresco-webscript/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-webscript/config/webpack.common.js
@@ -67,7 +67,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
diff --git a/ng2-components/ng2-alfresco-webscript/config/webpack.test.js b/ng2-components/ng2-alfresco-webscript/config/webpack.test.js
index 486fed8c15..50162a9397 100644
--- a/ng2-components/ng2-alfresco-webscript/config/webpack.test.js
+++ b/ng2-components/ng2-alfresco-webscript/config/webpack.test.js
@@ -36,6 +36,11 @@ module.exports = {
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
                 loader: 'file-loader',
diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index 59565594a0..55d5b4d87b 100644
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -93,7 +93,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "webscript",
diff --git a/ng2-components/package-base.json b/ng2-components/package-base.json
index 6db34dfdc1..f6438104b6 100644
--- a/ng2-components/package-base.json
+++ b/ng2-components/package-base.json
@@ -68,7 +68,9 @@
         "webpack-dev-server": "^2.3.0",
         "webpack-merge": "2.6.1",
         "jasmine-ajax": "^3.2.0",
-        "jasmine-core": "2.4.1"
+        "jasmine-core": "2.4.1",
+        "node-sass": "^3.13.1",
+        "sass-loader": "6.0.2"
     },
     "keywords": [
         "alfresco-ng2-components",
diff --git a/ng2-components/package.json b/ng2-components/package.json
index 356d6fca9a..9758ea8ebc 100644
--- a/ng2-components/package.json
+++ b/ng2-components/package.json
@@ -142,6 +142,8 @@
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2",
     "license-check": "1.1.5"
   },
   "license": "Apache-2.0",