web-dev-qa-db-fra.com

Feuilles de style de niveau module 2

Je conçois mon site Web selon une structure modulaire avec sass et je souhaite organiser les feuilles de style de manière à définir une feuille de style à chaque niveau de module (au lieu de chaque composant), puis à l'importer dans tous les composants. conserver une mise en page standard pour l’ensemble du module. 

Alors, est-ce une bonne approche? 

Si oui, existe-t-il une méthode pour exporter le fichier CSS du fichier module.ts vers tous les composants? De manière très similaire, les services sont rendus disponibles à l’aide de la variable providers. Cela me évitera la peine d'importer le même fichier CSS dans tous les composants individuellement.

cssangularsass
15
Sumit Agarwal

Disons donc que nous avons la structure suivante dans notre application angulaire

+-- src
|   +-- app
|   |   +-- customer
|   |   |   +-- customer.scss
|   |   |   +-- customer.module.ts
|   |   +-- product
|   |   |   +-- product.scss
|   |   |   +-- product.module.ts
|   +-- sass
|   |   +-- _common.scss
|   |   +-- app.scss
|   |   +-- project-level-styles.scss

Nous pouvons configurer notre fichier sass au niveau du projet comme suit:

@import 'common';

// project level classes
@import 'project-level-styles';

// module level classes
@import '../app/customer/customer.scss'
@import '../app/customer/product.scss'

Donc, dans ces customer.scss et product.scss, j'aurai des classes communes aux nombreux composants de ce module.

Il convient de noter que lorsque vous créez une feuille de style pas au niveau du composant et que vous la placez ailleurs, comme dans un répertoire de module ou de projet, la façon dont angular traite ces styles est différente. 

Angular Styles de composants

Angular peut regrouper des styles de composants avec des composants, permettant ainsi une conception plus modulaire que les feuilles de style classiques. Les sélecteurs que vous mettez dans les styles d'un composant s'appliquent uniquement dans le modèle de ce composant. 

Sachez donc que toutes les feuilles de style non associées au tableau de composants styleUrls peuvent être appliquées à n’importe quel élément de votre site (si vous n’utilisez pas de spécificité). Il ne s’applique pas uniquement à ce module, ce n’est peut-être pas une solution pour toutes les situations mais c’est quelque chose que je fais pour mes modules. Comprenant cela, je peux écrire mes styles dans cette feuille de style modulaire pour qu’il soit spécifique à ce module en ciblant la racine. élément pour ce module ...

composant vs global

Dans mon application, ma customerModule a un composant racine appelé customerComponent et j'ai un élément racine dans ce code HTML qui a une classe de:

customer-container

Donc, dans mon customer.scss, je peux ajouter tous mes styles de la manière suivante:

.customer-container .info-heading {
  font-size: 15px; color: #333;
}

.customer-container .section-divider {
  margin-top: 1em; border-top: 1px solid #dfdfdf;
}

Ainsi, je peux maintenant atteindre un niveau de spécificité qui empêche mes styles de se fondre dans d'autres composants du projet.

3
Eric Bishard

Alors, est-ce une bonne approche?

C'est subjectif. Les modules Angular aident à organiser une application en blocs de fonctionnalités cohérents. Voudrais-je différents styles pour différentes fonctionnalités de blocs? Hautement improbable.

Existe-t-il une méthode pour exporter le fichier CSS du fichier module.ts vers tous les composants.

Non, il est uniquement pris en charge au niveau composant. La solution de contournement serait d'avoir un fichier css unique référencé par tous les composants du module. Là encore, une bonne pratique serait de modulariser le fichier css et de l’utiliser au niveau des composants.

2
jkumaranc

Oui. Bien sûr, il est bon d’avoir différentes feuilles de style pour chaque composant. Même Angular CLI suit la même approche. Vous pouvez regarder et mettre la main sur: LINK

Alors, est-ce une bonne approche?

Oui, c’est une approche parfaite pour organiser la structure de fichiers de Angular app.

Si oui, existe-t-il une méthode pour exporter le fichier CSS du fichier module.ts vers tous les composants ?.

Par défaut, la CLI Angular ne donne aucune feuille de style pour le module, ce qui a également un sens. Pourquoi avez-vous besoin d'une feuille de style au niveau du module? Vous pouvez ajouter des styles liés au composant dans la feuille de style au niveau du composant. Vous pouvez également avoir une feuille de style au niveau du projet, à laquelle vous pouvez ajouter tous les styles courants. 

0
Tavish Aggarwal