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

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", function() { return 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", function() { return 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

@@ -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" },
             ],

templates/vendor.nativescript.ts

@@ -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: [

templates/webpack.angular.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" }
             ]
         },