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


#1

We wanted to apply different GLOBAL CSS file according to some logic.

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).

image

So you can see that Items are red :

image

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) :

image

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.

Question :

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

How can I set a global custom css file for my app ?


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

nativescript@4.1.1
Windows 10