Nativescript-cli: Bundle workflow does not support `css` extension in Angular `styleUrls` when using `scss`

Created on 4 Jul 2019 · 5Comments · Source: NativeScript/nativescript-cli

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 https://github.com/NativeScript/nativescript-cli/issues/4624#issuecomment-507945990_
_and @Manbearpixel in https://github.com/NativeScript/nativescript-cli/issues/4624#issuecomment-508305950_

question docs migration-to-bundle

Source

DimitarTachev

Most helpful comment

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

Manbearpixel on 11 Jul 2019

👍2

All 5 comments

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

DimitarTachev on 4 Jul 2019

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

Manbearpixel on 11 Jul 2019

👍2

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