Bundle workflow does not support css extension in Angular styleUrls when using scss

[DimitarTachev]

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?

Originally posted by @Manbearpixel in #4624 (comment)
and @Manbearpixel in #4624 (comment)

[DimitarTachev]

Hi @Manbearpixel,

Thanks for providing a sample application!

The issue is caused by the styleUrls properties in your Angular components. All of them were configured with .css files. For example:

import { Component, Input } from "@angular/core";

@Component({
  selector: "CreateConversationScreen, [CreateConversationScreen]",
  templateUrl: "./conversation.component.html",
  styleUrls: ['./conversation.component.css'] // <-- the styles file is set with .css extension
})
export class CreateConversationScreenComponent {
  @Input() active: boolean;
  constructor() {

  }
}

The Bundle workflow is not generating any css files in your app folder, it directly transpiles the scss files into css in memory. In other words, you have to refer your styles with their scss extensions. For example:

replace

styleUrls: ['./conversation.component.css'] 

with

styleUrls: ['./conversation.component.scss']

You have to repeat this step for each of your components.

Regarding the scss changes that are not applied, most probably you've run the app with the Legacy workflow on the same machine and you have both .css and .scss files. In this way, the Webpack process uses the auto-generated by the Legacy Workflow .css files (which are gitignored in your app) and the .scss files are not included in its compilation. That's the reason you are not getting a build time exception for missing .css files and the changes in .scss files are not working. If you reset your git repo, you will get a lot of build time errors for missing css files.

I also noticed that you are using an old version of nativescript-dev-webpack and I highly recommend you update to the latest version by executing the following commands:

1. npm i nativescript-dev-webpack@latest --save-dev
2. ./node_modules/.bin/update-ns-webpack --configs

[Manbearpixel]

@DimitarTachev Thank you for taking the time to look into this! Based on your feedback, let me make sure I follow your recommended changes:

• Replace all instances of styleUrls: ['./conversation.component.css'] with styleUrls: ['./conversation.component.scss']
• Update nativescript-dev-webpack

I'll give this a whirl and let you know how it goes! I had assumed that the end result (the stylesheet) had to be css as scss wouldn't work directly with the app.

[rosen-vladimirov]

Hey @Manbearpixel ,
Is there any update on this case? Did you have time to give it a try?

[Manbearpixel]

@rosen-vladimirov Yes, sorry! Took some time testing it out as NS 6 was just released as well so I went to test that migration.

Thanks again!

[rosen-vladimirov]

Hey @Manbearpixel ,
Can we close this issue?