Common CSS not applying when specifying platform specific
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Anfängerfreundlichkeit
- 45/100
- Issue-Typ
- Bug
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Veraltet
- Tech-Stack
- angular, typescript
Rechercherichtung
Beginne mit der im Issue verlinkten plattformspezifischen CSS-Anleitung und reproduziere das Verhalten mit items.component.css, items.component.android.css, items.component.ios.css und items.component.ts. Untersuche, warum das gemeinsame Stylesheet in die Android-Variante aufgelöst wird, und überprüfe anschließend, dass die gemeinsame Regel für Großbuchstaben und jede plattformspezifische Farbvorschrift gemeinsam angewendet werden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
{
"name": "stackblitz-nativescript-angular",
"main": "./src/main.ts",
"version": "1.0.0",
"private": true,
"dependencies": {
"@angular/animations": "~19.0.0",
"@angular/common": "~19.0.0",
"@angular/compiler": "~19.0.0",
"@angular/core": "~19.0.0",
"@angular/forms": "~19.0.0",
"@angular/platform-browser": "~19.0.0",
"@angular/platform-browser-dynamic": "~19.0.0",
"@angular/router": "~19.0.0",
"@nativescript/angular": "^19.0.0",
"@nativescript/core": "~8.8.0",
"rxjs": "~7.8.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~19.0.0",
"@angular/compiler-cli": "~19.0.0",
"@nativescript/preview-cli": "^1.0.14",
"@nativescript/stackblitz": "0.0.8",
"@nativescript/tailwind": "^2.1.0",
"@nativescript/types": "~8.8.0",
"@nativescript/webpack": "~5.0.0",
"@ngtools/webpack": "~19.0.0",
"tailwindcss": "~3.4.0",
"typescript": "~5.6.0"
}
}
Describe the bug
When adding platform specific css then the common.css is not being applied e.g: I have 3 css according to the docs: https://docs.nativescript.org/guide/styling#platform-specific-css
items.component.css
items.component.ios.css
items.component.android.css
When items.component.css is imported into the items.component.android.css then items.component.css rule aren't applied.
To Reproduce
Add 3 css
items.component.css
items.component.ios.css
items.component.android.css
Add styleUrl: 'items.component.css', into items.component.ts
Update items.component.html:
<ActionBar title="My App"> </ActionBar>
<GridLayout rows="*,*">
<Label row="0" text="Test" class="test"></Label>
<ListView row="1" [items]="itemService.items()">
<ng-template let-item="item">
<StackLayout [nsRouterLink]="['/item', item.id]">
<Label [text]="item.name" class="text-lg text-gray-500 p-4"></Label>
</StackLayout>
</ng-template>
</ListView>
</GridLayout>
Update 3 css file each with different rules:
items.component.css
.test {
text-transform: uppercase;
}
items.component.android.css
.test {
color: purple;
}
items.component.ios.css
.test {
color: green;
}
Expected behavior
Expect thar the items.component.css rule be applied for Test word be in Uppercase but only color changes in ios and android correctly.
Sample project
Additional context
What I noticed is that it prints this in the console: resolving "/home/projects/nativescript-stackblitz-templates-7sgpxgkm/src/app/item/items.component.css" to "/home/projects/nativescript-stackblitz-templates-7sgpxgkm/src/app/item/items.component.android.css"
More info on this video as well: https://www.youtube.com/watch?v=v5g6irUI704
- Vorherrschende Sprache
- TypeScript
- Sterne
- 55
- Forks
- 13
- Ø Merge
- 16 Min.
- Gemergte PRs (30 T.)
- 1
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus NativeScript/angular
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 45/100
NativeScript/angular#170 · 1 Kommentar ·
-
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 35/100
NativeScript/angular#164 ·
-
My types are gone Offen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 45/100
NativeScript/angular#163 · 1 Kommentar ·
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 38/100
NativeScript/angular#158 · 1 Reaktion ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 35/100
NativeScript/angular#155 ·
Alle Issues in NativeScript/angular
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
-
area:tools bug good first issue help wanted priority:P2
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 90/100
TaewoooPark/Motifcode#14 ·
-
bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
newrelic-experimental/preflight#793 · 1 Kommentar ·
-
bug 🐞
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
-
[Bounty proposal] fix(web): memory insights count an evening memory on the next day ($25 proposed) Offen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
BasedHardware/omi#15320 ·