CODEWITHSUNDEEP
nativescriptnativescript-angular
Viv
Viv

Reputation: 963

Platform-specific-css in Nativescript Angular

I'm trying to apply platform-specific-css in my Nativescript Angular Mobile App.

For example, for the home component, currently I have home.component.tns.css to style it. But I also need to handle some styles separately for IOS and Android.

Here's what I have tried:

  1. Add a css file named as home.component.ios.tns.css. Not working, the css in this file won't be applied.

  2. Add a css file named as home.component.ios.css. This time the css is applied. But I lost the css in home.component.tns.css

  3. I import home.component.tns.css in home.component.ios.css like this: @import './home.component.tns.css'; This time I got an error saying NativeScript encountered a fatal error: Error: Could not resolve home.component.tns.css

I guess I wasn't using the platform specific css in the right way. Anyone can help?

Upvotes: 0

Views: 2358

Answers (3)

Otpidus
Otpidus

Reputation: 519

The platform specific files should be like:

  • yourcustom.component.css
  • styles.component.ios.css
  • styles.component.android.css

Upvotes: 0

ThibaultG
ThibaultG

Reputation: 83

You can't import home.component.tns.css because there will only by home.component.css available.

You can put all your css in home.component.ios.css.
Or you can use the .android and .ios classes like :

.ios .myClass {
    background-color: red;
}

.android .myClass {
    background-color: blue;
}

Upvotes: 0

Tyler Blake
Tyler Blake

Reputation: 136

Unless you are doing a shared-project (web + NS in 1 project).

To set up platform specific styling in NativeScript you need to name your files like this:

home.component.ios.css

home.component.android.css

In your home.component.ts you'll set up your styles binding like this:

styleUrls: ['./home.component.css']

NativeScript will take the respective platform .css file and generate the contents of the base home.component.css file with the platform specific style sheet .ios.css or .android.css.

Upvotes: 2

Related Questions