Open MaxiSonntag opened 5 years ago
I have what I think is a related problem. I use SASS for NativeScript and the following does not work in my _app-common.scss
.tablet :host {
.btn,
button {
font-size: 24;
}
}
The exact same css put into my mycomp.component.scss
works fine.
Painful because styles I'd like applied throughout my app I have to copy/paste into every component's .scss
(or use an import).
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 scss
compiles it leaves :host
in the resulting css
.
_app-common.scss
:
.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 app.ios.scss
looks like this:
// 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 app.ios.css
correctly:
...
.tablet :host .btn,
.tablet :host button {
font-size: 24;
}
However this is not picked up in any of my components. If I put the .tablet :host {...
into my component specific .scss
it compiles down to the same .css
and everything works fine. Also of note, the other rules in _app-common.scss
are correctly working throughout all my components.
@NathanaelA any ideas? I haven't looked at your code yet to see how the device (ex: .tablet
) injection is working.
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 page
element. I have seen another bug that if you are using a tabview
as the top element you have issues since the code looks for a page element, never finds it so it never sets it. I need to spend some time with the plugin and making sure all top level elements are supported (Page
used to be the only valid top level element, in the latest versions of NS now there can be several types... So this is a known issue; just haven't had time to test and fix it... )
AFAIK Angular running on NativeScript does not have a <page>
XML element.
main.ts
loads ./app/app.module
which loads and renders app.component.ts
. In my app, app.component.html
is:
<page-router-outlet></page-router-outlet>
And the 1st (root aka /
) component that is rendered in this router-outlet is my home.component.html
:
<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
is being injected correctly, because if I put the following into home.component.scss
it works as expected:
.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 Page
element; the ActionBar is a child of Page
; NativeScript Angular it is automatically adding a Page element for you, I think the Page router does it automatically if you don't create one. ;-)
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
you should NOT use the :host
selector. The :host
selector is only needed in a specific component's SASS file.
_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.