Following SASS guide in docs causes the emulators to show a blank app

[chrillewoodz]

I found this:

https://docs.nativescript.org/ui/theme#sass-usage

Which successfully imports my own styles into app.android.css and app.ios.css files. BUT.. After I've installed SASS and done this the app is just completely blank when I run it in the emulator, both in android and ios.

I get no errors or anything. My friend also got the same issue when following the guide.

[tsonevn]

Hi @chrillewoodz,
I tested this case on my side while following the instructions from the below attached article, however was unable to reproduce the issue.
For your convenience, I am attaching a sample project. Could you review it and make the needed changes, which will allow me to debug this issue.

In the meantime, you could also try to remove platforms and node_modules folders and try to rebuild again the app with tns run <platform_name>.

Archive.zip

[chrillewoodz]

@tsonevn Your example works for me too, I'm starting to think that this might also be related to lazy loading? As mentioned here: #735

Because I cannot see any difference between our two projects other than the fact that my modules are lazy loaded and the example you provided is not.

[tsonevn]

Hi @chrillewoodz,
Could you send us sample project, where this issue could be reproduced locally on my side?
It would also help if you could provide info, whether this issue is reproduced on both iOS and Android or just on one of the both.

[chrillewoodz]

@tsonevn You can use this as a starting point:

https://github.com/andresfleat/native-app/tree/sprint1

Then follow the SASS guide and try to get it to work. This uses lazy loading as I mentioned.

[tsonevn]

Hi @chrillewoodz,
I reviewed that scenario while using the project from the above-mentioned repository and everything seems to work as expected.
Bear in mind that you should refer the path to the CSS file in styleUrls. In your app, I notice that in login.component.ts file you are setting the path to login.component.scss file, which will break the project.
You could review the below given example and make the needed changes, which should allow you to use SASS in the project.

login.component.ts

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {

  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  public loginForm: FormGroup = this.fb.group({
    email: ['', Validators.required],
    password: ['', Validators.required]
  });

  ngOnInit() {}

  login(): void {
    console.log('valid state: ' + JSON.stringify(this.loginForm.value))
    // Not running for some reason
    if (this.loginForm.valid) {
      alert('You are logged in bitcha')
    }
  }

  goToRegister(): void {
    this.router.navigate(['../register'], {relativeTo: this.route});
  }
}

[chrillewoodz]

@tsonevn Ok, I will investigate further on this. Thank you for your time. I guess we can close this for now.