diff --git a/.gitignore b/.gitignore
index e7cdd7db..fca848e3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,6 +34,9 @@ bundle-config-loader.js
 xml-namespace-loader.d.ts
 xml-namespace-loader.js
 
+css2json-loader.d.ts
+css2json-loader.js
+
 **/*.spec.js*
 **/*.spec.d.ts*
 
diff --git a/apply-css-loader.js b/apply-css-loader.js
index a543e525..41e0f674 100644
--- a/apply-css-loader.js
+++ b/apply-css-loader.js
@@ -1,18 +1,43 @@
+const cssLoaderWarning = "The apply-css-loader expects the file to be pre-processed by css-loader. It might not work properly. Please check your webpack configuration";
+
+function checkForCssLoader(loaders, loaderIndex) {
+    if (!loaders) {
+        return false;
+    }
+
+    for (var i = loaderIndex + 1; i < loaders.length; i++) {
+        const loader = loaders[i];
+        if (loader.path && loader.path.indexOf("css-loader") > 0) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
 module.exports = function (content, map) {
     if (this.request.match(/\/app\.(css|scss|less|sass)$/)) {
         return content;
     }
+
+    // Emit a warning if the file was not processed by the css-loader.
+    if (!checkForCssLoader(this.loaders, this.loaderIndex)) {
+        this.emitWarning(new Error(cssLoaderWarning));
+    }
+
     content += `
     const application = require("tns-core-modules/application");
     require("tns-core-modules/ui/styling/style-scope");
 
-    exports.forEach(cssExport => {
-        if (cssExport.length > 1 && cssExport[1]) {
-            // applying the second item of the export as it contains the css contents
-            application.addCss(cssExport[1]);
-        }
-    });
-    `;
+    if (typeof exports.forEach === "function") {
+        exports.forEach(cssExport => {
+            if (cssExport.length > 1 && cssExport[1]) {
+                // applying the second item of the export as it contains the css contents
+                application.addCss(cssExport[1]);
+            }
+        });
+    }
+`;
 
     this.callback(null, content, map);
-}
\ No newline at end of file
+}
diff --git a/css2json-loader.js b/css2json-loader.js
deleted file mode 100644
index 022d645b..00000000
--- a/css2json-loader.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const parse = require("tns-core-modules/css").parse;
-const nl = "\n";
-
-module.exports = function (content, map) {
-    const ast = parse(content);
-    const dependencies = getImportsFrom(ast)
-        .map(mapURI)
-        .reduce((dependencies, { uri, requireURI }) =>
-            dependencies + `global.registerModule(${uri}, () => require(${requireURI}));${nl}`, "");
-
-    const str = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);
-    this.callback(null, `${dependencies}module.exports = ${str};`, map);
-}
-
-function getImportsFrom(ast) {
-    if (!ast || ast.type !== "stylesheet" || !ast.stylesheet) {
-        return [];
-    }
-    return ast.stylesheet.rules
-        .filter(rule => rule.type === "import")
-        .map(importRule => importRule.import.replace(/[\'\"]/gm, ""));
-}
-
-function mapURI(uri) {
-    return {
-        uri: JSON.stringify(uri),
-        requireURI: JSON.stringify(uri[0] === "~" && uri[1] !== "/" ? uri.substr(1) : uri)
-    };
-}
diff --git a/css2json-loader.spec.ts b/css2json-loader.spec.ts
new file mode 100644
index 00000000..76ce79e3
--- /dev/null
+++ b/css2json-loader.spec.ts
@@ -0,0 +1,79 @@
+import css2jsonLoader from "./css2json-loader";
+
+const importTestCases = [
+    `@import url("custom.css");`,
+    `@import url('custom.css');`,
+    `@import url('custom.css') print;`,
+    `@import url("custom.css") print;`,
+    `@import url('custom.css') screen and (orientation:landscape);`,
+    `@import url("custom.css") screen and (orientation:landscape);`,
+    `@import 'custom.css';`,
+    `@import "custom.css";`,
+    `@import 'custom.css' screen;`,
+    `@import "custom.css" screen;`,
+    `@import url(custom.css);`,
+]
+
+const someCSS = `
+.btn {
+    background-color: #7f9
+}
+`
+
+describe("css2jsonLoader", () => {
+    it("converts CSS to JSON", (done) => {
+        const loaderContext = {
+            callback: (error, source: string, map) => {
+                expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                done();
+            }
+        }
+
+        css2jsonLoader.call(loaderContext, someCSS);
+    })
+
+    importTestCases.forEach((importTestCase) => {
+        it(`handles: ${importTestCase}`, (done) => {
+
+            const loaderContext = {
+                callback: (error, source: string, map) => {
+                    expect(source).toContain(`global.registerModule("custom.css", () => require("custom.css"))`);
+                    expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                    done();
+                },
+            }
+
+            css2jsonLoader.call(loaderContext, importTestCase + someCSS);
+        })
+    });
+
+    it("inlines css2json loader in imports if option is provided", (done) => {
+        const loaderContext = {
+            callback: (error, source: string, map) => {
+                expect(source).toContain(`global.registerModule("custom.css", () => require("!nativescript-dev-webpack/css2json-loader?useForImports!custom.css"))`);
+                expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                done();
+            },
+            query: { useForImports: true }
+        }
+
+        css2jsonLoader.call(loaderContext, `@import url("custom.css");` + someCSS);
+    })
+
+    it("registers modules for paths starting with ~", (done) => {
+        const loaderContext = {
+            callback: (error, source: string, map) => {
+                expect(source).toContain(`global.registerModule("~custom.css", () => require("custom.css"))`);
+                expect(source).toContain(`global.registerModule("custom.css", () => require("custom.css"))`);
+                expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                done();
+            }
+        }
+
+        css2jsonLoader.call(loaderContext, `@import url("~custom.css");` + someCSS);
+    })
+});
diff --git a/css2json-loader.ts b/css2json-loader.ts
new file mode 100644
index 00000000..056a51b0
--- /dev/null
+++ b/css2json-loader.ts
@@ -0,0 +1,66 @@
+import { parse, Rule, SyntaxTree } from "tns-core-modules/css";
+import { loader } from "webpack";
+import { getOptions } from "loader-utils";
+
+interface ImportRule extends Rule {
+    import: string;
+}
+
+const betweenQuotesPattern = /('|")(.*?)\1/;
+const unpackUrlPattern = /url\(([^\)]+)\)/;
+const inlineLoader = "!nativescript-dev-webpack/css2json-loader?useForImports!"
+
+const loader: loader.Loader = function (content: string, map) {
+    const options = getOptions(this) || {};
+    const inline = !!options.useForImports;
+    const requirePrefix = inline ? inlineLoader : "";
+
+    const ast = parse(content, undefined);
+
+    let dependencies = [];
+    getImportRules(ast)
+        .map(extractUrlFromRule)
+        .map(createRequireUri)
+        .forEach(({ uri, requireURI }) => {
+            dependencies.push(`global.registerModule("${uri}", () => require("${requirePrefix}${requireURI}"));`);
+
+            // Call registerModule with requireURI to handle cases like @import "~@nativescript/theme/css/blue.css";
+            if (uri !== requireURI) {
+                dependencies.push(`global.registerModule("${requireURI}", () => require("${requirePrefix}${requireURI}"));`);
+            }
+        });
+    const str = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);
+    this.callback(null, `${dependencies.join("\n")}module.exports = ${str};`, map);
+}
+
+function getImportRules(ast: SyntaxTree): ImportRule[] {
+    if (!ast || (<any>ast).type !== "stylesheet" || !ast.stylesheet) {
+        return [];
+    }
+    return <ImportRule[]>ast.stylesheet.rules
+        .filter(rule => rule.type === "import" && (<any>rule).import)
+}
+
+/**
+ * Extracts the url from import rule (ex. `url("./platform.css")`)
+ */
+function extractUrlFromRule(importRule: ImportRule): string {
+    const urlValue = importRule.import;
+
+    const unpackedUrlMatch = urlValue.match(unpackUrlPattern);
+    const unpackedValue = unpackedUrlMatch ? unpackedUrlMatch[1] : urlValue
+
+    const quotesMatch = unpackedValue.match(betweenQuotesPattern);
+    return quotesMatch ? quotesMatch[2] : unpackedValue;
+};
+
+function createRequireUri(uri): { uri: string, requireURI: string } {
+    return {
+        uri: uri,
+        requireURI: uri[0] === "~" && uri[1] !== "/" ? uri.substr(1) : uri
+    };
+}
+
+
+
+export default loader;
\ No newline at end of file
diff --git a/demo/AngularApp/webpack.config.js b/demo/AngularApp/webpack.config.js
index 04179234..28f2fbd2 100644
--- a/demo/AngularApp/webpack.config.js
+++ b/demo/AngularApp/webpack.config.js
@@ -226,14 +226,20 @@ module.exports = env => {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } }
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        }
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } },
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        },
                         "sass-loader"
                     ]
                 },
diff --git a/demo/JavaScriptApp/webpack.config.js b/demo/JavaScriptApp/webpack.config.js
index c4684e61..b889ef6f 100644
--- a/demo/JavaScriptApp/webpack.config.js
+++ b/demo/JavaScriptApp/webpack.config.js
@@ -188,13 +188,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },
diff --git a/demo/TypeScriptApp/webpack.config.js b/demo/TypeScriptApp/webpack.config.js
index 2418be9d..df0542e0 100644
--- a/demo/TypeScriptApp/webpack.config.js
+++ b/demo/TypeScriptApp/webpack.config.js
@@ -194,13 +194,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },
diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
index 593b27d0..330dd2cb 100644
--- a/templates/webpack.angular.js
+++ b/templates/webpack.angular.js
@@ -228,19 +228,24 @@ module.exports = env => {
 
                 { test: /\.html$|\.xml$/, use: "raw-loader" },
 
-                // tns-core-modules reads the app.css and its imports using css-loader
                 {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } }
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        }
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } },
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        },
                         "sass-loader"
                     ]
                 },
diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
index 3f669da1..7ab17682 100644
--- a/templates/webpack.javascript.js
+++ b/templates/webpack.javascript.js
@@ -195,13 +195,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },
diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
index 50249817..e11e1117 100644
--- a/templates/webpack.typescript.js
+++ b/templates/webpack.typescript.js
@@ -202,13 +202,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },
diff --git a/templates/webpack.vue.js b/templates/webpack.vue.js
index edb031d4..e3dfd4c7 100644
--- a/templates/webpack.vue.js
+++ b/templates/webpack.vue.js
@@ -195,8 +195,30 @@ module.exports = env => {
                     },
                 ].filter(loader => Boolean(loader)),
             },
+            {
+                test: /[\/|\\]app\.css$/,
+                use: [
+                    'nativescript-dev-webpack/style-hot-loader',
+                    {
+                        loader: "nativescript-dev-webpack/css2json-loader",
+                        options: { useForImports: true }
+                    },
+                ],
+            },
+            {
+                test: /[\/|\\]app\.scss$/,
+                use: [
+                    'nativescript-dev-webpack/style-hot-loader',
+                    {
+                        loader: "nativescript-dev-webpack/css2json-loader",
+                        options: { useForImports: true }
+                    },
+                    'sass-loader',
+                ],
+            },
             {
                 test: /\.css$/,
+                exclude: /[\/|\\]app\.css$/,
                 use: [
                     'nativescript-dev-webpack/style-hot-loader',
                     'nativescript-dev-webpack/apply-css-loader.js',
@@ -205,11 +227,12 @@ module.exports = env => {
             },
             {
                 test: /\.scss$/,
+                exclude: /[\/|\\]app\.scss$/,
                 use: [
                     'nativescript-dev-webpack/style-hot-loader',
                     'nativescript-dev-webpack/apply-css-loader.js',
                     { loader: "css-loader", options: { url: false } },
-                    "sass-loader",
+                    'sass-loader',
                 ],
             },
             {