NativeScript/Angular - Как импортировать глобальные стили?

Question

В приложении NativeScript я пытаюсь применить некоторые глобальные стили, которые будут использоваться в приложении.

Это моя структура:

- 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';

Как вы можете видеть стили для .flt-btn следует применять, но это не так.

Я использую класс в модуле функций, который загружен лениво, login как это:

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

Если я поместил стили btn прямо в app.css без какого-либо импорта это работает, но так как это файл CSS, я не могу использовать Scss в нем. Так что я не уверен, будет ли импорт когда-либо работать, делая это так.

Как я могу убедиться, что стили из импорта партиалов применяются во всем приложении?

РЕДАКТИРОВАТЬ:

Я нашел это, который успешно импортирует мои собственные стили в app.android.css а также app.ios.css файлы. НО.. После того, как я установил SASS и сделал это, приложение просто пусто, когда я запускаю его в эмуляторе, как в Android, так и в IOS.

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

РЕДАКТИРОВАТЬ 2:

Похоже, приложение работает, потому что я могу что-то app.component.tsконструктор, так что я предполагаю, что что-то вызывает исчезновение всех элементов на странице с новыми настройками стилей.

Answer 1

Я нашел это руководство: https://docs.nativescript.org/ui/theme

Какой правильный способ пойти по этому поводу. Это создаст файл scss/css для android и ios, а также создаст _app-common.scss файл, который вы можете использовать для импорта ваших собственных стилей в. Затем это будет применено к Android и IOS CSS.

Как ни странно, компонент scss работает без установки sass, как описано выше. Но после установки sass вы больше не можете ссылаться на scss файл в styleUrls свойство компонента, теперь оно должно вместо ссылки на css файл. Почему это так, я не смог понять, но, думаю, это не имеет большого значения, так как, по крайней мере, работает.

Ответ, предоставленный @tay hua, неверен, так как относится к angular-cli а не nativescript-cliТак что, если вы похожи на меня и застряли на этом, это ответ, который вы должны смотреть.