5

W aplikacji NativeScript próbuję zastosować niektóre style globalne, które będą udostępniane w całej aplikacji.NativeScript/Angular - jak importować style globalne?

To moja konstrukcja:

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

Jak widać style dla .flt-btn powinny być stosowane, ale nie są.

Używam klasy w module funkcji, który jest leniwy załadowany, login tak:

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

Jeśli mogę umieścić style btn bezpośrednio w app.css bez importu to działa, ale ponieważ jest to css plik Nie mogę użyć w tym celu scss. Nie jestem więc pewien, czy import kiedykolwiek zadziała, robiąc to w ten sposób.

Jak mogę się upewnić, że style z importu częściowego są stosowane w całej aplikacji?

EDIT:

znalazłem this, które z powodzeniem importuje własne style w app.android.css i app.ios.css plików. ALE .. Po zainstalowaniu SASS i zrobieniu tego, aplikacja jest zupełnie pusta, gdy uruchomię ją w emulatorze, zarówno w systemie Android, jak i ios.

Nie otrzymuję żadnych błędów, nic. Czy ktoś z powodzeniem potrafił działać tak, jak to? Daj mi znać, a otrzymasz nagrodę.

EDIT 2:

Wygląda na to, że aplikacja jest uruchomiona, bo mogę z powodzeniem coś w konstruktorze app.component.ts „s dziennika, więc zgaduję, że coś jest przyczyną wszystkich elementów na stronie, aby znikną wraz z nowymi ustawieniami stylów.

Odpowiedz

2

znalazłem ten przewodnik: https://docs.nativescript.org/ui/theme#sass-usage

który jest właściwy sposób, aby przejść na ten temat. Spowoduje to utworzenie pliku scss/css dla systemu Android i ios, a także utworzenie pliku _app-common.scss, za pomocą którego można zaimportować własne style niestandardowe. Zostanie to zastosowane do androida i ios css.

O dziwo, komponent scss działa bez instalowania sass jak wyżej. Ale po zainstalowaniu sass nie można już odwoływać się do pliku scss we właściwości komponentu, należy teraz połączyć go z plikiem .Czemu to nie jestem w stanie wymyślić, ale myślę, że to nie jest wielka sprawa, ponieważ przynajmniej działa.

Odpowiedź udzielana przez @tay hua jest nieprawidłowy, gdyż odnosi się do angular-cli aniżeli nativescript-cli, więc jeśli jesteś podobny do mnie i utknął na ten temat, to odpowiedź powinna być patrząc na.