NativeScript / Angular - How to import global styles?

Question

In a NativeScript application, I'm trying to apply some global styles that will be available in the application.

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, styles for .flt-btn should apply, but it is not.

I use a class in a function module that is lazy loaded, login as follows:

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

If I put the btn styles directly in app.css without any imports, it will work, but since it is a css file, I cannot use scss . Therefore, I am not sure that imports will work by doing this as follows.

How can I make sure that styles from importing partial applications are applied in the application?

EDIT:

I found this one that successfully imports my own styles into the app.android.css and app.ios.css . BUT .. After I installed SASS and did this, the application is just completely empty when I run it in the emulator, both in Android and in ios.

I get no errors, nothing. Can anyone successfully get such a job? Please let me know how you will be rewarded.

EDIT 2:

It looks like the application works because I can successfully register something in the app.component.ts constructor, so I assume that something causes all the elements on the page to disappear with the new style settings.

Answer 1

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

What is the correct way to do this. This will create a scss / css file for android and ios, and also create a _app-common.scss , which you can use to import your own custom styles. This will then be applied to android and ios css.

Oddly enough, the scss component works without installing sass, as described above. But after installing sass, you can no longer refer to the scss file in the component's styleUrls property, now it should reference the css file. Why I could not understand this, but, I think, it is not so important, because at least it works.

The answer provided by @tay hua is incorrect , as it relates to angular-cli and not to nativescript-cli , so if you are like me and stuck on this, this is the answer you should look at.