2017-10-11 4 views
1

Je me demandais juste quand on utilisait un thème Prime NG par exemple "Omega" ... quel est le bon ordre des feuilles de style dans la configuration cli angulaire. Dans le premier documentation ng est des listes:Quel est le bon ordre d'actifs de style lors de l'utilisation Prime NG et Angular CLI

<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" /> 
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" /> 
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" /> 

Et presque juste en dessous de cette documentation sous Configuration Styles il énumère:

"styles": [ 
"../node_modules/font-awesome/css/font-awesome.min.css", 
"../node_modules/primeng/resources/primeng.min.css", 
    "../node_modules/primeng/resources/themes/omega/theme.css", 
//... 
], 

Maintenant, je suis d'accord avec ce dernier voyant que le thème qui l'emporte sur la css de base de primeng est chargé en dernier (cascade). Mais en regardant la source sur leur site de démonstration pour leurs thèmes, il semble qu'ils chargent le thème puis les styles primeng.

Cela n'a tout simplement pas de sens pour moi de charger le thème, puis charger les styles primeng base. Alors, quelle est la bonne façon?

Encore plus déroutant est le livre premier NG je listes comme suit:

"styles": [ 
"../node_modules/primeng/resources/themes/omega/theme.css", 
"../node_modules/primeng/resources/primeng.min.css", 
"../node_modules/font-awesome/css/font-awesome.min.css", 
], 

Et la seule façon cette méthode est logique est si cli angulaire à un point roulé les styles de bas en haut (il roule actuellement de haut en bas)

https://www.primefaces.org/primeng/#/setup

https://www.primefaces.org/omega-ng/#/

+0

J'ai utilisé celui qu'ils ont PrimeNG book –

+0

@ChauTran avez-vous créé un thème personnalisé? ou simplement utiliser leur thème oméga? Avez-vous remarqué un css prioritaire ne fonctionnait pas? – floor

Répondre

1

Ainsi, après un peu plus recherch J'ai découvert que cet ordre n'est pas important. Mais cela joue un rôle si vous essayez de remplacer les styles css de primeNG. Je n'ai pas remarqué de problèmes avec la place de font-awesome dans la commande mais pour faire bonne mesure, je mettrais les dépendances en premier. Et pour faire bonne mesure, vous devez commander vos styles:

"styles": [ "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/primeng/resources/primeng.min.css", "../node_modules/primeng/resources/themes/omega/theme.css", //...rest of styles ],

Parce que vous ne savez jamais si vous souhaitez remplacer certains des styles de base de primeNG et il pourrait créer une confusion si l'ordre n'est pas correct.