Search code examples
csssassnativescriptangular2-nativescriptnativescript-cli

NativeScript/Angular - How to import global styles?

In a NativeScript app I'm trying to apply some global styles that will be shared across the app.

This is my structure:

- styles
 - partials
  - _buttons.scss
  - _exports.scss

_buttons.scss:

.flt-btn {
  border-radius: 35px;
}

_exports.scss:

@import '_buttons.scss';

app.css:

@import './styles/partials/_exports.scss';

As you can see the the styles for .flt-btn should be applied, but they're not.

I'm using the class in a feature module that's lazy loaded, login like this:

<Button class="flt-btn" text="A button"></Button>

If I put the btn styles directly in app.css without any imports it works, but since this is a css file I can't use scss in it. So I'm not sure if the imports will ever work by doing it like this.

How can I make sure that the styles from the partials imports are applied application-wide?

EDIT:

I found this, 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, nothing. Has anyone successfully been able to get sass working like this? Please let me know how and thou shalt be rewarded.

EDIT 2:

It looks like the app is running, because I can successfully log something in the app.component.ts's constructor, so I'm guessing that something is causing all the elements on the page to disappear with the new styles settings.

Solution

  • I found this guide: https://docs.nativescript.org/ui/theme#sass-usage

    Which is the correct way to go about this. This will create a scss/css file for android and ios as well as creating an _app-common.scss file which you can use to import your own custom styles into. This will then be applied to the android and ios css.

    Strangely enough the component scss works without installing sass like above. But after installing sass you can no longer reference the scss file in the styleUrls property of a component, it should now instead link to the css file. Why this is I haven't been able to figure out, but I guess it's not a big deal since it at least works.

    The answer provided by @tay hua is incorrect, as it refers to the angular-cli rather than the nativescript-cli, so if you're like me and got stuck on this, this is the answer you should be looking at.