SCSS Styles aren't applied until you kill the simulator and restart the app

[NickIliev]

From @chrillewoodz on July 20, 2017 7:57

Did you verify this is a real problem by searching [Stack Overflow]

I could not find any similar issues reported.

Tell us about the problem

I'm using SASS and also angular, but the latter I'm not sure is a part of the problem. Probably not.
I've got an _app-common.scss file and then a _globals.scss file which I import into it, if I put a simple Page { background: #ccc } in the global file it won't take affect until I kill the simulator completely, and run tns run ios (or android) again.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: 3.1.2
• Cross-platform modules: 3.1.0
• Runtime(s): 3.1.0

Please tell us how to recreate the issue in as much detail as possible.

Install the SASS plugin, create an _app-common.scss file and import it into the app.android.scss and app.ios.scss respectively , create two folders so you get styles/partials. Add a _globals.scss file in the partials folder and add Page { background-color: #ccc } (or anything that will style something) and you will see that nothing happens when you change the styling. Now restart the app with tns run ios (or android) and notice how nothing changes. Now kill the simulator with right-click -> quit, and restart the app again to see the styling being applied.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

_app-common.scss:

@import '~nativescript-theme-core/scss/light';
@import '~nativescript-theme-core/scss/index';

@import '~/styles/partials/_globals.scss';

_globals.scss:

Page {
  background-color: #ccc;
}

EDIT:

I also notice that if you have a style error, for instance if you have lightgrey which is an invalid value, and you change it to a valid value. You also have to kill the simulator and restart the app, just restarting or fixing the issue doesn't work because the error is still there.

Copied from original issue: NativeScript/NativeScript#4578

[Fatme]

Hi @chrillewoodz,

This issue is already fixed in latest versions of NativeScript and nativescript-dev-sass. Can you please try it on your side?

To update you need to do:

npm i -g nativescript@latest

Inside your project you need to do:

npm i --save-dev nativescript-dev-sass@latest
rm -rf node_modules
tns run ios