Платформо-зависимая CSS в Nativescript Angular - PullRequest
Новая
       17

Платформо-зависимая CSS в Nativescript Angular

0 голосов
/ 10 октября 2019

Я пытаюсь применить platform-specific-css в моем Nativescript Angular мобильном приложении.

Например, для домашнего компонента, в настоящее время у меня естьhome.component.tns.css чтобы стилизовать его. Но мне также нужно обрабатывать некоторые стили отдельно для IOS и Android.

Вот что я попробовал:

  1. Добавить файл CSS с именем home.component.ios.tns.css. Не работает, CSS в этом файле не будет применен.

  2. Добавить файл CSS с именем home.component.ios.css. На этот раз CSS применяется. Но я потерял CSS в home.component.tns.css

  3. Я импортирую home.component.tns.css в home.component.ios.css следующим образом: @import './home.component.tns.css'; На этот раз я получил сообщение о том, что NativeScript обнаружил фатальную ошибкуошибка: ошибка: не удалось разрешить home.component.tns.css

Я полагаю, что неправильно использовал css для конкретной платформы. Кто-нибудь может помочь?

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Если вы не делаете shared-проект (web + NS в 1 проекте).

Чтобы настроить стиль для конкретной платформы в NativeScript, вы должны назвать свои файлы так:

home.component.ios.css

home.component.android.css

В вашем home.component.ts вы настроите привязку стилей следующим образом:

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

NativeScript возьмет файл .css соответствующей платформы и сгенерирует содержимое базового файла home.component.css стаблица стилей для конкретной платформы .ios.css или .android.css.

0 голосов
/ 10 октября 2019

Вы не можете импортировать home.component.tns.css, потому что будет доступно только home.component.css.

Вы можете поместить все свои CSS в home.component.ios.css.
Или можете использовать классы .android и .ios, такие как: 

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

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