Zastosuj styl css do wszystkich komponentów w Kątowymi 2 app

mam bardzo podstawowe i wielokrotnego użytku reguły CSS, takie jak:Zastosuj styl css do wszystkich komponentów w Kątowymi 2 app

.ng-invalid { 
    border-left: 5px solid #a94442; 
} 

.ng-valid { 
    border-left: 5px solid #42A948; 
}

Chciałbym ponownie z nich korzystać dla wszystkich moich komponentów. Jeśli umieści to w moim katalogu głównym AppComponent, który jest bootstrapowany przez Angular, to nie jest rozpoznawany przez inne składniki w mojej aplikacji inne niż AppComponent.

Pewnie brakuje tu czegoś oczywistego.

Źródło

2016-04-14 mariocatch

Prawdopodobnie powinieneś zadeklarować globalne reguły css w swoim html lub zewnętrznym arkuszu stylów.

Źródło

2016-04-14 20:44:22 kemsky

Chyba myślał zbyt ** Angular ** o tym. Tak, masz rację haha. – mariocatch

Można achive to mój zmieniając swój styl

:host .ng-invalid { 
    border-left: 5px solid #a94442; 
} 

:host .ng-valid { 
    border-left: 5px solid #42A948; 
}

i komponentów podrzędnych można ustawić właściwość encapsulation: ViewEncapsulation.None (ale domyślnie jest ViewEncapsulation.None więc może nie trzeba ustawić również).

, więc teraz powinieneś móc używać swojej klasy stylu we wszystkich komponentach potomnych.

Demo: http://plnkr.co/edit/ALgOw3FHmW8RsClI8Nnb?p=preview

Źródło

2016-04-14 21:31:55 sreeramu

kątowa dodaje unikalnych klas do swojego urządzenia i przepisuje selektory CSS dodane do składników tylko do meczu, że składniki unikalne klasy, przed dodaniem do <head> CSS. Ma to na celu emulację enkapsulacji w stylu DOM w cieniu.

można obejść przez

ustawić encapsulation: ViewEncapsulation.None który zapobiega przepisywanie style dla elementów gdzie hermetyzacja jest wyłączona
dodać CSS do index.html bezpośrednio. Angular nie przepisuje CSS, który nie jest dodawany do komponentów.
użyj "przekłuwania cienia łącznika CSS" * >>> someSelector { ... }, który powoduje również, że CSS ignoruje unikalne klasy dodane do komponentów.
Podpowiedź: /deep/ to alias do >>>, ale działa lepiej z SASS.

Źródło

2016-04-15 05:38:47

Z biegiem linii komend:

npm install file-ładowarka flagą --save-dev

Teraz w webpack.config.js style-ładowarka dodać następującą linię do tablicy ładowarek:

{Test: /\.(eot|woff2|woff|ttf|svg)/, ładowarka: 'file-loader'}

teraz w swoim app.component.ts po swoim sprawozdaniu na przywóz, dodać w następującej linii:

require ('style! Bootstrap/dist/css/bootstrap.css')

Zakłada się, że używasz najnowszej wersji angular2/angular2 nasion znaleźć tutaj: https://github.com/angular/angular2-seed z dniem 8 listopada 2016

Źródło

2016-11-08 10:08:35 SlimSim

Moim zdaniem należy zgodzić się na konkretnej strategii w tym zakresie w całej swojej całości zespół.

E.g. możesz ustawić encapsulation: ViewEncapsulation.None podobnie jak @sreeramu wymienione w jego odpowiedzi. Ale tylko dla składnika aplikacji (root).

Powinieneś korzystać z enkapsulacji CSS tak bardzo, jak to tylko możliwe, więc wyłączenie go dla kilku składników jest trochę śmierdzące. Ale zastosowanie go tylko do jednego komponentu może działać dobrze.

Źródło

2017-03-29 07:34:39 marekozw

można napisać CSS wewnątrz src/styles.css

lub utworzyć nowy plik CSS i określić wewnątrz .angular-cli.json plików

"apps": [ 
    "styles": ["styles.scss"] 
]

Źródło

2017-07-06 06:47:41

Zastosuj styl css do wszystkich komponentów w Kątowymi 2 app

Odpowiedz

Powiązane problemy