diff --git a/demo/TypeScriptApp/app/app.android.css b/demo/TypeScriptApp/app/app.android.scss
similarity index 100%
rename from demo/TypeScriptApp/app/app.android.css
rename to demo/TypeScriptApp/app/app.android.scss
diff --git a/demo/TypeScriptApp/app/app.ios.css b/demo/TypeScriptApp/app/app.ios.scss
similarity index 100%
rename from demo/TypeScriptApp/app/app.ios.css
rename to demo/TypeScriptApp/app/app.ios.scss
diff --git a/demo/TypeScriptApp/app/bundle-config.ts b/demo/TypeScriptApp/app/bundle-config.ts
index 89587488..589d3ca8 100644
--- a/demo/TypeScriptApp/app/bundle-config.ts
+++ b/demo/TypeScriptApp/app/bundle-config.ts
@@ -6,10 +6,4 @@ if ((<any>global).TNS_WEBPACK) {
     // This will register each xml, css, js, ts, scss etc. in the app/ folder
     const context = (<any>require).context("~/", true, /page\.(xml|css|js|ts|scss)$/);
     global.registerWebpackModules(context);
-
-    console.log("Register:");
-    context.keys().forEach(key => {
-        console.log(" - " + key);
-    });
-
 }
diff --git a/templates/vendor.angular.ts b/templates/vendor.angular.ts
index f169ccb7..4526eca9 100644
--- a/templates/vendor.angular.ts
+++ b/templates/vendor.angular.ts
@@ -1,7 +1,8 @@
 // Snapshot the ~/app.css and the theme
 const application = require("application");
 require("ui/styling/style-scope");
-global.registerModule("app.css", function() { return require("~/app.css"); });
+const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
+global.registerWebpackModules(appCssContext);
 application.loadAppCss();
 
 require("./vendor-platform");
diff --git a/templates/vendor.nativescript.ts b/templates/vendor.nativescript.ts
index c15be1d5..8a381374 100644
--- a/templates/vendor.nativescript.ts
+++ b/templates/vendor.nativescript.ts
@@ -1,7 +1,8 @@
 // Snapshot the ~/app.css and the theme
 const application = require("application");
 require("ui/styling/style-scope");
-global.registerModule("app.css", function() { return require("~/app.css"); });
+const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
+global.registerWebpackModules(appCssContext);
 application.loadAppCss();
 
 require("./vendor-platform");
diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
index ae429b18..77d04c96 100644
--- a/templates/webpack.angular.js
+++ b/templates/webpack.angular.js
@@ -14,7 +14,6 @@ module.exports = env => {
         throw new Error("You need to provide a target platform!");
     }
     const platforms = ["ios", "android"];
-    const mainSheet = "app.css";
     const { snapshot, uglify, report, aot } = env;
     const ngToolsWebpackOptions = { tsConfigPath: aot ? "tsconfig.aot.json" : "tsconfig.json"};
 
@@ -59,12 +58,15 @@ module.exports = env => {
         module: {
             rules: [
                 { test: /\.html$|\.xml$/, use: "raw-loader" },
-                // Root stylesheet gets extracted with bundled dependencies
-                { test: new RegExp(mainSheet), use: "css-loader?url=false" },
-                // Other CSS files get bundled using the raw loader
-                { test: /\.css$/, exclude: new RegExp(mainSheet), use: "raw-loader" },
-                // SASS support
-                { test: /\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
+
+                // tns-core-modules reads the app.css and its imports using css-loader
+                { test: /^.\/app\.css$/, use: "css-loader?url=false" },
+                { test: /^.\/app\.scss$/, use: ["css-loader?url=false", "sass-loader"] },
+
+                // Angular components reference css files and their imports using raw-loader
+                { test: /\.css$/, exclude: /^.\/app\.css$/, use: "raw-loader" },
+                { test: /\.scss$/, exclude: /^.\/app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
+
                 // Compile TypeScript files with ahead-of-time compiler.
                 { test: /.ts$/, loader: "@ngtools/webpack" },
             ],
diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
index db566123..551a79a1 100644
--- a/templates/webpack.javascript.js
+++ b/templates/webpack.javascript.js
@@ -13,7 +13,6 @@ module.exports = env => {
         throw new Error("You need to provide a target platform!");
     }
     const platforms = ["ios", "android"];
-    const mainSheet = "app.css";
     const { snapshot, uglify, report } = env;
 
     const config = {
@@ -56,13 +55,10 @@ module.exports = env => {
         },
         module: {
             rules: [
-                { test: /\.html$|\.xml$/, use: "raw-loader" },
-                // Root stylesheet gets extracted with bundled dependencies
-                { test: new RegExp(mainSheet), use: "css-loader?url=false" },
-                // Other CSS files get bundled using the raw loader
-                { test: /\.css$/, exclude: new RegExp(mainSheet), use: "raw-loader" },
-                // SASS support
-                { test: /\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
+                { test: /\.(html|xml)$/, use: "raw-loader" },
+
+                { test: /\.css$/, use: "css-loader?url=false" },
+                { test: /\.scss$/, use: ["css-loader?url=false", "sass-loader"] },
             ]
         },
         plugins: [
diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
index b5243310..71c7750d 100644
--- a/templates/webpack.typescript.js
+++ b/templates/webpack.typescript.js
@@ -56,14 +56,11 @@ module.exports = env => {
         },
         module: {
             rules: [
-                { test: /\.html$|\.xml$/, use: "raw-loader" },
-                // Root stylesheet gets extracted with bundled dependencies
-                { test: new RegExp(mainSheet), use: "css-loader?url=false" },
-                // Other CSS files get bundled using the raw loader
-                { test: /\.css$/, exclude: new RegExp(mainSheet), use: "raw-loader" },
-                // SASS support
-                { test: /\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
-                // Compile TypeScript files, replace templateUrl and styleUrls.
+                { test: /\.(html|xml)$/, use: "raw-loader" },
+
+                { test: /\.css$/, use: "css-loader?url=false" },
+                { test: /\.scss$/, use: ["css-loader?url=false", "sass-loader"] },
+
                 { test: /\.ts$/, use: "awesome-typescript-loader" }
             ]
         },