angulaire 2 modules css

Question

j'ai essayé utiliser

@Component({ 
    selector: 'about', 
    template: './about.hmtl', 
    styles: ['.block {background-color: red} ...'] // <-- This will generate css modules 
}) 

Cela fonctionne bien, chaque classe angulaire développe avec le sélecteur d'attribut et donner tous les éléments DOM attribut unique. Mais l'application se chargera-t-elle rapidement quand il y aura beaucoup de modules CSS (par exemple 20 composants et environ 100 lignes de code CSS pour chaque composant)?

Answer 1

En ce qui concerne le composant css, vous ne voulez pas avoir de duplication, de duplication et c'est difficile à maintenir. Nous vous recommandons de trouver le composant le plus haut ou le composant parent qui contient tout le composant enfant que vous voulez styler et de définir vos styles. Utilisez un fichier externe ou définissez-le en ligne. Ensuite, dans le décorateur du composant, définissez la propriété encapsulation sur ViewEncapsulation.None. Cela signifie que tout le composant enfant héritera des styles des composants parents et que vous pourrez conserver un peu de CSS au lieu de l'avoir partout.