Global CSS is NOT applied when "useLegacyWorkflow": false

[YaakovDavid]

Global CSS is NOT applied when "useLegacyWorkflow": false but when tuned to true "useLegacyWorkflow": true it works perfectly
(AND THAT IS THE ONLY CHANGE)

I ran application.getCssFileName() and it returns the correct file (it just doesn't work)

My app is running Nativescript Core with Typescript
App info:

17:42 $ tns doctor
✔ Getting environment information 

No issues were detected.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ Xcode is installed and is configured properly.
✔ xcodeproj is installed and is configured properly.
✔ CocoaPods are installed.
✔ CocoaPods update is not required.
✔ CocoaPods are configured properly.
✔ Your current CocoaPods version is newer than 1.0.0.
✔ Python installed and configured correctly.
✔ The Python 'six' package is found.
✔ Xcode version 10.2.1 satisfies minimum required version 9.
✔ Getting NativeScript components versions information...
✔ Component nativescript has 5.4.0 version and is up to date.
✔ Component tns-core-modules has 5.4.0 version and is up to date.
✔ Component tns-android has 5.4.0 version and is up to date.
✔ Component tns-ios has 5.4.0 version and is up to date.

tns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 5.4.0 version and is up to date.
✔ Component tns-core-modules has 5.4.0 version and is up to date.
✔ Component tns-android has 5.4.0 version and is up to date.
✔ Component tns-ios has 5.4.0 version and is up to date.

 
tns plugin
Dependencies:
┌──────────────────────────────────┬─────────┐
│ Plugin                           │ Version │
│ @types/base-64                   │ ^0.1.3  │
│ @types/utf8                      │ ^2.1.6  │
│ base-64                          │ ^0.1.0  │
│ nativescript-camera              │ ^4.4.0  │
│ nativescript-checkbox            │ ^3.0.3  │
│ nativescript-clipboard           │ ^1.1.7  │
│ nativescript-drop-down           │ ^5.0.0  │
│ nativescript-fingerprint-auth    │ ^6.2.0  │
│ nativescript-folding-list-view   │ ^1.2.0  │
│ nativescript-https               │ ^1.0.3  │
│ nativescript-local-notifications │ ^3.1.2  │
│ nativescript-mapbox              │ ^4.4.1  │
│ nativescript-masked-text-field   │ ^4.0.1  │
│ nativescript-menu                │ ^1.0.3  │
│ nativescript-orientation         │ ^2.2.1  │
│ nativescript-pdf-view            │ ^2.0.1  │
│ nativescript-platform-css        │ ^1.6.7  │
│ nativescript-secure-storage      │ ^2.4.0  │
│ nativescript-social-share        │ ^1.5.1  │
│ nativescript-stripe              │ ^5.0.8  │
│ nativescript-toasty              │ ^1.3.0  │
│ nativescript-ui-listview         │ ^6.1.0  │
│ nativescript-ui-sidedrawer       │ ^6.0.0  │
│ nativescript-videoplayer         │ ^4.2.1  │
│ nativescript-wonderpush          │ ^0.1.1  │
│ rxjs                             │ ~6.3.0  │
│ tns-core-modules                 │ ^5.4.0  │
│ utf8                             │ ^3.0.0  │
└──────────────────────────────────┴─────────┘
Dev Dependencies:
┌─────────────────────────────┬─────────┐
│ Plugin                      │ Version │
│ nativescript-dev-sass       │ ^1.7.0  │
│ nativescript-dev-typescript │ ~0.7.0  │
│ nativescript-dev-webpack    │ ^0.21.2 │
│ nativescript-theme-core     │ ^1.0.4  │
│ node-sass                   │ ^4.11.0 │
│ tns-platform-declarations   │ ^5.2.0  │
│ tslint                      │ ~5.11.0 │
└─────────────────────────────┴─────────┘

[rosen-vladimirov]

Hey @YaakovDavid ,

I've tried to reproduce the issue, but with no luck. Can you please share more details about your application - are you using app.css or app.scss? It will be great in case you can send us an application reproducing the unexpected behavior.
Also, you may try updating the nativescript-dev-webpack to its latest version (and update your webpack.config.js) and see if it resolves the issue.

[YaakovDavid]

I updated nativescript-dev-webpac and webpack.config.js

I am using CSS

I just reproduced this issue with a completly new app

$ tns create css-test-app

# Let’s create a NativeScript app!

Answer the following questions to help us build the right app for you. (Note: you
can skip this prompt next time using the --template option, or the --ng, --vue, --ts,
or --js flags.)

? First, which style of NativeScript project would you like to use: Plain TypeSc
ript

? Next, which template would you like to start from: SideDrawer

Than in app.ts I added

import * as application from "tns-core-modules/application";
application.setCssFileName("css/style.css");

I created a folder called css and a file in it called style.css than I made a simple change

.action-bar {
  background-color: red;
}

and the actionBar stayed blue, then I when into the home-page.ts and

import * as application from "tns-core-modules/application";
console.log("application.css: " + application.getCssFileName());

and it showed that it is using css/style.css than I went into nsconfig.json and changed

{
  "useLegacyWorkflow": false
}

from false

{
  "useLegacyWorkflow": true
}

to true and the actionBar turned red

app info:

$ tns plugin
Dependencies:
┌────────────────────────────┬─────────┐
│ Plugin                     │ Version │
│ nativescript-theme-core    │ ~1.0.4  │
│ nativescript-ui-sidedrawer │ ~6.0.0  │
│ rxjs                       │ ~6.3.0  │
│ tns-core-modules           │ ~5.4.0  │
└────────────────────────────┴─────────┘
Dev Dependencies:
┌─────────────────────────────┬─────────┐
│ Plugin                      │ Version │
│ nativescript-dev-sass       │ ~1.7.0  │
│ nativescript-dev-typescript │ ~0.9.0  │
│ nativescript-dev-webpack    │ ~0.22.0 │
│ tslint                      │ ~5.11.0 │
└─────────────────────────────┴─────────┘

[rosen-vladimirov]

Hey @YaakovDavid ,
Thank you very much for the detailed description and steps to reproduce.
Indeed there's a difference in the way application files are handled in the legacy workflow and the bundle workflow. You can read a great description here: NativeScript/nativescript-dev-webpack#867 (comment)
So, as a short explanation, when using the bundle workflow the automatically included html/xml/css files are -root.<extension>, -page.<extension>. (NOTE: This is valid for the files that are not required anywhere in your app).
So, in your case, the styles.css is not automatically picked up and it is not included in the bundle. There are different ways to handle this on your side.

1. Rename the file to styles-root.css - this way it will be picked up automatically.
2. Keep using the styles.css name, but manually register the file:

global.registerModule("./css/style.css", () => require("./css/style.css"));
application.setCssFileName("./css/style.css");

Can you give it a try and see if it works on your side?

[YaakovDavid]

Adding root.css didn't work for me but

global.registerModule("./css/style.css", () => require("./css/style.css"));
application.setCssFileName("./css/style.css");

did work.

Thank you so much for your quick responses and help!

[DimitarTachev]

Update: If the global styles file isscss, sass or less, you still need to pass it as css to application.setCssFileName. (e.g. create ./styles/styles-root.scss and application.setCssFileName("./styles/styles-root.css");)

[vikasacharya16]

hey where i need to update this code?

[YaakovDavid]

@vick16ach in app.ts

[Manbearpixel]

I've just updated the CLI and started using the new workflow to build the app. The app builds fine and typescript changes are picked up properly and compiled to JS and kicks off a build

Changes done to scss files however do not. This not working makes the entire switch to this build process moot for me. Does anyone have any workarounds yet?