feat: Configure the vendor scripts to also use less, sass, scss for app.css

This will make the apps able to use app.scss instead of app.css without additional
manual reconfiguration.

Author: PanayotCankov

demo/TypeScriptApp/app/app.android.css renamed to demo/TypeScriptApp/app/app.android.scss

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

demo/TypeScriptApp/app/app.ios.css renamed to demo/TypeScriptApp/app/app.ios.scss

@@ -1,7 +1,8 @@
 // Snapshot the ~/app.css and the theme
 const application = require("application");
 require("ui/styling/style-scope");
-global.registerModule("app.css", () => require("~/app.css"));
+const appCssContext = require.context("~/", false, /^app\.(css|scss|less|sass)$/);
+global.registerWebpackModules(appCssContext);
 application.loadAppCss();
 
 require("./vendor-platform");

demo/TypeScriptApp/app/bundle-config.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", () => require("~/app.css"));
+const appCssContext = require.context("~/", false, /^app\.(css|scss|less|sass)$/);
+global.registerWebpackModules(appCssContext);
 application.loadAppCss();
 
 require("./vendor-platform");

templates/vendor.angular.ts

@@ -64,7 +64,7 @@ module.exports = env => {
                 // 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: /\.scss$/, use: ["css-loader?url=false", "sass-loader"] },
                 // Compile TypeScript files with ahead-of-time compiler.
                 { test: /.ts$/, loader: "@ngtools/webpack" },
             ],

templates/vendor.nativescript.ts

@@ -62,7 +62,7 @@ module.exports = env => {
                 // 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: /\.scss$/, use: ["css-loader?url=false", "sass-loader"] },
             ]
         },
         plugins: [

templates/webpack.angular.js

@@ -62,7 +62,7 @@ module.exports = env => {
                 // 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: /\.scss$/, use: ["css-loader?url=false", "sass-loader"] },
                 // Compile TypeScript files, replace templateUrl and styleUrls.
                 { test: /\.ts$/, use: "awesome-typescript-loader" }
             ]