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?

[DimitarTachev]

Hi @Manbearpixel,

We don't have any known issues with changes in scss files and the Hot Updates are working as expected on our side. I just tried the following:

1) tns create tabsTs --template tns-template-tab-navigation-ts
2) cd tabsTs
3) tns run ios
4) Modify `app/app.ios.scss`, `_app-common.scss` or `_app-variables.scss`.
5) I'm getting the proper Hot Updates and the app is updated as expected.

Could you provide us with a sample application demonstrating your issue?

[Manbearpixel]

@DimitarTachev I'll try dummying down an application for my project. Unfortunately most of the source has not been opened up yet, so i'll limit it to a few simpler views. I appreciate you replying back! It might be some sort of tsconfig or webpack.config setting throwing this off.

I had to change this file:

tsconfig.tns.json
{
  "extends": "./tsconfig",
  "compilerOptions": {
    "module": "es2015",
  }
}

To specifically use commonjs instead of es2015 for imports that weren't working when doing a build through sidekick.

[Manbearpixel]

@DimitarTachev Alright! I've minified the codebase and left one primary example. Here is the repo:
https://github.com/Manbearpixel/ns-temp

So I ran npm i and accepted "Y" to use the new bundle build process when I first ran tns run android.

Now to recreate the issue I am having... Look at the first view which is located in src/app/create-account/conversation/. Once you see this in your emulator (or physical device) try making a change on the height of the image figures. For example, on Line#105 of src/app/create-account/conversation/conversation.component.scss. Change the 110 to say 120.

After I save this file, nothing kicks off in the console and the app does not rebuild. I'd have to actually open up the should-be-generated css file instead and make that change to kick off a build.

As I stated, this may be a webpack config issue, and if so I'd greatly appreciate help looking at it to see what I might be doing wrong! Otherwise this new build process for me when just running it to develop rather than do release builds will not work properly :(

[DimitarTachev]

Hi @Manbearpixel,

Thanks for sharing a sample application!

I moved this into a new issue as it's not related to the global css.

[DimitarTachev]

I'm closing this issue as starting from this PR and NativeScript 6.0, we are automatically including all app files instead of requiring the old -page or -root convention. In other words, the additional global.registerModule call is not required anymore.

You could also take a look at this issue comment for a way of excluding files from the Webpack compilation.

Bear in mind that the scss and less part of the issue is still valid and when you need such global styles, you need to pass them as css.