-
Notifications
You must be signed in to change notification settings - Fork 18
NativeScript Angular - Styles not applied in app.component #22
Comments
I have what I think is a related problem. I use SASS for NativeScript and the following does not work in my .tablet :host {
.btn,
button {
font-size: 24;
}
} The exact same css put into my Painful because styles I'd like applied throughout my app I have to copy/paste into every component's |
Check the CSS generated and make sure the :host is being applied. If Sass is stripping it out; that would be the reason. |
Thanks for the idea, but when the
.far {
font-family: 'Font Awesome 5 Free', fa-regular-400;
}
.fab {
font-family: 'Font Awesome 5 Brands', fa-brands-400;
}
.fas {
font-family: 'Font Awesome 5 Free Solid', fa-solid-900;
}
.action-link {
color: $btn-color;
}
.tablet :host {
.btn,
button {
font-size: 24;
}
} my // Import app variables
@import 'app-variables';
// Import the theme’s main ruleset - both index and platform specific.
@import '~nativescript-theme-core/scss/index';
@import '~nativescript-theme-core/scss/platforms/index.ios';
// Import common styles
@import 'app-common';
// Place any CSS rules you want to apply only on iOS here It compiles to ...
.tablet :host .btn,
.tablet :host button {
font-size: 24;
} However this is not picked up in any of my components. If I put the @NathanaelA any ideas? I haven't looked at your code yet to see how the device (ex: My guess is this is an issue completely outside of your plugin, so don't waste your time on this if you don't know off the top of your head. |
Hmm, that is weird. .tablet is injected at the top level |
AFAIK Angular running on NativeScript does not have a
<page-router-outlet></page-router-outlet> And the 1st (root aka <ActionBar title="Home" class="action-bar" visability="collapsed"></ActionBar>
<Button class="btn btn-primary btn-rounded-sm" [nsRouterLink]="['/showtime/create']" text="Create"></Button>
... I know the .tablet :host {
.btn,
button {
font-size: 24;
}
} Totally understand not testing and fixing this one. It is easy to work around, and like I said its prob not problem with your plugin. Just leaving details here incase someone else runs into it. |
Actually just because you are not be manually adding a root There is some auto-add code in several components in NativeScript -- if you don't actually specify a proper parent element it will create it in between the two pieces that need it. |
For anyone else who stumbles upon this issue using Angular + NS, I've found that when you're adding a rule to a global SASS file like _app-common.scss: .tablet {
.btn, button {
font-size: 24;
}
} home.component.scss: .tablet :host {
.btn, button {
font-size: 24;
}
} I hope this helps the next person. Good luck. |
The plugin works just fine in regular components in NativeScript with Angular, but not in
app.component
.require( "nativescript-platform-css" );
is set inmain.ts
file, however styles inapp.component.css
are not applied toapp.component.html
layout. Same if required inapp.module.ts
. When using the same code in a placeholder component it works like a charm.I'm using
TabView
as root navigation, therefore it would be nice if it was possible to set platform specific syles here as well.The text was updated successfully, but these errors were encountered: