Quelle est la bonne façon de positionner / commander des fichiers CSS dans Magento 2?

13

Pour inclure un fichier CSS, ajoutez le bloc <css src = "<path> / <file>" media = "print | <option>" /> dans la section <head> d'un fichier de mise en page.

Cependant, cela ne dit pas comment nous pouvons influencer l'ordre de nos fichiers CSS. Et si nous ajoutons des fichiers CSS de cette façon dans un thème personnalisé qui a un thème parent, le résultat est que les fichiers sont ajoutés tout en haut de la section <head> avec beaucoup d'autres fichiers CSS en dessous d'eux, ce qui signifie que leur priorité est assez faible et nous ne pouvons pas facilement remplacer les règles du thème parent ou des extensions.

Il y avait des problèmes similaires dans Magento 1 et il y avait des solutions de contournement. Certains étaient plus propres, d'autres moins.
Quelle est la meilleure façon de commander un fichier CSS d'un thème personnalisé au bas de <head> dans Magento 2 - si possible en respectant les directives de mise en page de Magento 2 pour les thèmes personnalisés?

— Jey DWork
source

13

Magento2 n'a pas de mécanisme intégré pour cela, j'ai donc décidé de le traiter comme une opportunité d'écrire ma première extension Magento2. L' extension Quickshiftin \ Assetorderer est maintenant disponible sur GitHub!

Une fois l'extension installée, vous pouvez spécifier un attribut de commande dans vos balises XML CSS .

<head>
  <css src="css/page/home.css" order="100"/>
</head>

Vous pouvez également utiliser l' attribut order dans les fichiers XML de mise en page tels que default_head_blocks.xml. Toutes les balises CSS pour lesquelles vous ne spécifiez pas d' ordre sont traitées comme si elles avaient un ordre de 1.

— quickshiftin
source

Merci beaucoup. Votre extension a fonctionné pour moi. Mais j'ai rencontré deux problèmes, l'un dans di.xml et l'autre dans la classe Quickshiftin \ Assetorderer \ View \ Asset \ File.

— Pankaj Pareek

Salut @PankajPareek, c'est une bonne et une mauvaise nouvelle. Y a-t-il une chance que vous puissiez développer GitHub et éventuellement contribuer une pull request? Ce serait bien de rendre l'extension utile à tout le monde!

— quickshiftin

@quickshiftin Cette extension fonctionnait en v2.0, mais pas en v2.1.1. Cependant, j'ai découvert par hasard qu'il n'est plus requis dans la v2.1.1 car lorsque j'ajoute order="1"le fichier est correctement commandé. Peu importe quel est l'attribut tant que vous ajoutez un attribut supplémentaire. Pour le faire valider, vous pouvez le changer en data-order="1"et cela fonctionnerait toujours.

— thdoan

commandez également le travail pour le fichier js.

— Jalpesh Patel

@quickshiftin avez-vous mis à jour votre module pour le M2.2.2

— PЯINCƏ

7

Vous pouvez ajouter l' mediaattribut à l'élément css. Cela l'ajoutera à la fin de tous les CSS inclus dans la tête.

<head>
    <css src="css/styles.css" media="all" />
</head>

— andyace
source

Et si je le veux d'abord?

— TheBlackBenzKid

Cela chargera toujours le CSS personnalisé avant les principaux fichiers CSS principaux de magento 2 :(

— Jonathan Marzullo

Depuis M2.2.1, c'est la seule solution qui a fonctionné pour moi. L'ajout de 'order = "X"' au nœud <css> renvoie une erreur car cet attribut n'est pas autorisé.

— Dynomite

2

J'ai répondu en détail ici sur la façon dont magento rend les css et comment l'ordre se passe derrière la scène.

Quelques points supplémentaires que je dois mentionner ici sont:

Si vous souhaitez rendre votre fichier css personnalisé après style-m.csset stlyle-l.css, vous devez définir votre fichier css comme ci-dessous:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
Si vous souhaitez charger votre fichier css personnalisé avant style-m.csset stlyle-l.css, vous devez inclure votre fichier css via le fichier xml de mise en page default_head_blocks.xmlet ajouter votre fichier css personnalisé ci style-m.css- dessus et stlyle-l.css.

Les propriétés CSS sont finies et bien définies dans le schéma de disposition. Selon le schéma de disposition, vous pouvez utiliser les propriétés suivantes dans votre fichier css.

Fichier: vendor/magento/framework/View/Layout/etc/head.xsd

<xs:complexType name="linkType">
    <xs:attribute name="src" type="xs:string" use="required"/>
    <xs:attribute name="defer" type="xs:string"/>
    <xs:attribute name="ie_condition" type="xs:string"/>
    <xs:attribute name="charset" type="xs:string"/>
    <xs:attribute name="hreflang" type="xs:string"/>
    <xs:attribute name="media" type="xs:string"/>
    <xs:attribute name="rel" type="xs:string"/>
    <xs:attribute name="rev" type="xs:string"/>
    <xs:attribute name="sizes" type="xs:string"/>
    <xs:attribute name="target" type="xs:string"/>
    <xs:attribute name="type" type="xs:string"/>
    <xs:attribute name="src_type" type="xs:string"/>
</xs:complexType>

Cela signifie simplement que vous ne pouvez pas utiliser orderou toute autre propriété avec la définition CSS dans votre fichier XML de mise en page. Ce faisant, vous obtiendrez une exception qui indique que la validation du schéma échoue.

— Rajeev K Tomy
source

1

Vous pouvez rendre vos règles CSS plus ou moins importantes que les règles CSS de base en ajoutant ou en supprimant des sélecteurs parents supplémentaires.
Par exemple, voyons un exemple de règle CSS dans le noyau:

.cart.table-wrapper .item .col.item {
    padding: 20px 8px 20px 0;
}

Vous pouvez rendre votre règle personnalisée plus importante en ajoutant un sélecteur parent, par exemple:

body .cart.table-wrapper .item .col.item {
    padding: 10px 8px 20px 0;
}

ou

body .cart.table-wrapper .item td.col.item {
    padding: 10px 8px 20px 0;
}

Vous pouvez rendre votre règle personnalisée moins importante en supprimant un sélecteur parent, par exemple:

.item td.col.item {
    padding: 30px 8px 20px 0;
}

— Mage2.PRO
source

3

Bien sûr, et moi aussi, nous pourrions tout simplement claquer !important(mais bien sûr, votre approche est toujours meilleure que cela) ou implémenter une classe de préfixe de fournisseur avec MOINS. Cela ajoute encore des frais généraux et une complexité inutiles. Pourquoi préfixer des centaines ou plus de règles alors qu'un simple changement d'ordre du CSS le ferait? Je suis donc toujours à la recherche d'un bon moyen de résoudre ce problème du côté de Magento ...

— Jey DWork

En outre, lorsqu'il s'agit d'autres ressources que le positionnement CSS, cela pourrait devenir encore plus important, car les solutions de contournement pourraient devenir encore plus laides.

— Jey DWork

6

Ce n'est pas une réponse

— Ahmad Alfy