Can't resolve '~/app' for `cssFile`

[RoyiNamir]

Empty new project : tns create aaa --ng :

We wanted to apply different GLOBAL CSS file according to some logic. ( css which includes different font names for different languages etc...)

So we did a small test just to check if applying a custom name ( not app.css but app1.css) is working :

We've used the sample project : tns create aaa --ng & webpack (all latest versions )

//main.ts:
platformNativeScriptDynamic({
                                startPageActionBarHidden: false ,
                                cssFile:"app1.css"
                            }) .bootstrapModule(AppModule);

It DOES work (without --bundle).

So you can see that Items are red :

BUT - Now we wanted to test with --bundle , so we've modified the webpack json file also to search for app1.css and not app.css

(also modified main.aot.ts) with :

import { setCssFileName } from "application";
setCssFileName("./app1.css");

However - running tns run android --bundle does NOT work :

ERROR in ../node_modules/nativescript-dev-webpack/load-application-css-angular.js
Module not found: Error: Can't resolve '~/app' in 'C:\Users\sff\Desktop\delme1\ddd\node_modules\nativescript-dev-webpack'
 @ ../node_modules/nativescript-dev-webpack/load-application-css-angular.js 5:49-65
 @ ./main.ts

I've also tried with :

import { setCssFileName } from "application";
setCssFileName("./app1.css");

It run to completion but the app1.css file is not applied ( no reds here) :

We've tried many variations :

  cssFile:"app1.css"
  cssFile:"./app1.css"
  cssFile:"~/app1.css"
  cssFile:"/app1.css"

But when I think about it , this ^ is not related - becuase if I do cssFile:"app1.css" without --bundle then - app1.css is respected.
the problem is that it's not respected with --bundle

None of them worked.

It seems that app1.css with --bundle is not respected. Only app.css is respected.

---

package.json
project sample : https://ufile.io/ge4to

nativescript@4.1.1
Windows 10

[sis0k0]

Hi, @RoyiNamir!

The nativescript-dev-webpack plugin uses different logic for loading the global css file compared to the build without webpack. The loading is performed by the bundle-config-loader and the code looks something like this (for Angular apps):

var application = require("tns-core-modules/application");
require("tns-core-modules/ui/styling/style-scope");
global.registerModule("./app.css", function () { return require("~/app"); });
application.loadAppCss();

As you can see it looks for ~/app by default. This should resolve to app.css. However, you can disable that loading and write a custom loader. Check out the repo bellow and follow the commits. Ping me if you have any questions.
https://github.com/sis0k0/ns-custom-global-css

[vakrilov]

Update: Looks like we introduced some changes in NativeScript@6 that require changes in workaround provided by @sis0k0.

The global.registerModule should register "app.css" instead of "./app.css" (although you can register both - it does not hurt).
Here is how the fix looks like, just in case someone is using this approach or stumbles upon this issue.