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

В приложении 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, поэтому я предполагаю, что что-то заставляет все элементы на странице исчезать с новыми настройками стилей.


nativescript css sass angular2-nativescript nativescript-cli
person Chrillewoodz    schedule 02.04.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

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

person Chrillewoodz    schedule 12.04.2017