Module not found when using SASS with Webpack

[mikaelkalt]

Problem Description

When using SASS in combination with webpack, the build fails because webpack won't find the compiled CSS files. The error will be something like the following:

ERROR in ./item/item-detail.component.ts
Module not found: Error: Can't resolve './item-detail.css' in 'app/item'
 @ ./item/item-detail.component.ts 17:21-49
 @ ./app.module.ts
 @ ./main.ts

When building the app with webpack using e.g. tns build ios --bundle the SASS compilation is skipped (for whatever reason) - so I guess that's the reason behind the problem.

Which platform(s) does your issue occur on?

Since it's a problem during the build, I guess this is secondary but:

• Happens on both platforms
• Happens for emulator or device build.

Version numbers that the issue occurs with:

• CLI: 4.2.2
• Cross-platform modules: 4.2.0
• Runtime(s):
• iOS: 4.2.0
• Android: 4.2.0
• Plugin(s): 1.6.0

Recreate the issue

Technically it's quite simple. When you create a new NativeScript project and setup webpack and SASS - the app won't (most likely) build.

I have prepared a sample project to easily reproduce the problem, you can find that here:
https://github.com/mikaelkalt/nativescript-angular-sass-webpack-sample

The following issue might be related to that one:
NativeScript/nativescript-dev-webpack#473

[joel-bach]

I can confirm this problem. It's quite annoying to run tns build ios/android (without --bundle) before the webpack build just to trigger the SASS compilation.
It is possible to disable the skipping within the before-prepare hook by copying the contents of nativescript-dev-sass/lib/before-prepare.js and removing the bundle flag from the if statement. But I guess this is not the way to do it because the nativescript-dev-sass team probably wouldn't have added this statement for no reason. Can anyone explain the reasoning behind this? Why should the build with --bundle skip the SASS compilation? Thanks for any hints!

[Fatme]

Hey @mikaelkalt, @joelfisch ,

Thank you for sending us a demo project.
Actually you need to reference the .scss file instead .css here https://github.com/mikaelkalt/nativescript-angular-sass-webpack-sample/blob/master/app/item/item-detail.component.ts#L10 The code should be:

styleUrls: ["./item-detail.scss"]

The project builds successfully after the mentioned changes.

The build with --bundle skips the SASS compilation because webpack has its own mechanism(plugin) to handle sass files and actually nativescript-dev-sass plugin's logic is not needed in this case and should be skipped.

[joel-bach]

@Fatme Thank you for your explanation! Your suggestion works for me whether I build with or without --bundle thus this issue is resolved for me. @mikaelkalt Does it work for you as well?

[mikaelkalt]

@joelfisch @Fatme Thank you very much, it really works.. (although I was pretty sure that I've tested it :-( )

Anyways, it is very confusing that in the official nativescript documentation it is explicitly mentioned to reference the css files and not the scss files:
https://docs.nativescript.org/ui/theme#sass-usage

I guess the reason for that is that the documentation is not about using webpack, but it would be very useful to mention this specialty when using webpack in combination with this plugin.

[Fatme]

@mikaelkalt,

Thank you. We'll update our documentation!

[Fatme]

@mikaelkalt,

This is the PR updating the docs https://github.com/NativeScript/docs/pull/1405