La meilleure façon d'étendre le module moins trouvé dans web / css / source / module, comme _minicart.less?


14

Quelle est alors la meilleure façon d'étendre moins de contenu de fichiers <module>/web/css/source/module/, comme par exemple Magento_Checkout/web/css/source/module/_minicart.less?

En supposant que

A) SURPASSER

  1. moins lié au thème, vous devez créer (ou copier) un moins avec le même nom que le thème parent et le mettre dans votre thème comme ceci theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. module spécifique moins vous devez créer (ou copier) un moins avec le même nom du thème parent et le mettre dans votre thème comme ceci theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. UI lib less you must create (or copy) a less with the same name content in the library folder and put it in your theme like this magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

et à

B) ÉTENDRE

  1. moins lié au thème, vous devez créer un fichier _extend.less dans votre thème en ajoutant _extend dans le nom comme ceci <your-theme>/web/css/source/_navigation_extend.lesspour étendre theme-frontend-blank/web/css/source/_navigation.lessET enregistrer ce fichier avec la directive @import dans le _extend.less du contenu du thème dans web / css / source ->@import "_navigation_extend.less"
  2. spécifique au module moins vous devez créer un fichier _extend.less dans le chemin du module de votre thème comme celui-ci <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessqui étend le _module.less original de Magento_CatalogSearch
  3. UI lib less vous devez créer un moins avec le même contenu dans le dossier de la bibliothèque en ajoutant _extend dans le nom comme ceci <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.lesspour étendre magento2-base/lib/web/css/source/lib/_buttons.lessET enregistrer ce fichier avec la directive @import dans le _extend.less du contenu du thème dans web / css / source - >@import "lib/_buttons_extend.less"

La théorie doit vous suggérer de créer un _minicart_extend.less mais cela ne fonctionne pas automatiquement. Peut-être devriez-vous importer ce fichier dans le _extend.less de ce module comme expliqué dans B1 ou B3?

Et pourquoi ces composants qui s'étendent moins ne sont pas automatiquement inclus dans l'analyse du CSS si c'est la bonne façon de les étendre mais doivent être importés dans le _extend.less?

(Voici également une autre question: quelles sont les différences entre web/css/source/lib/_buttons.lesset web/css/source/_buttons.less? 😕)

Je suis un peu confus. J'espère que quelqu'un pourrait m'aider.

Désolé pour ce long texte.


Sources:

Réponses:


12

Selon les conventions de Magento 2, la meilleure façon d'étendre les styles de module est la suivante:

Si nous voulons étendre les styles, Magento_Checkout/web/css/source/module/_minicart.lessnous devons avoir 2 fichiers

  • <your-theme>/Magento_Checkout/web/css/source/_extend.lessoù nous importerons nos extensions personnalisées. Dans ce cas@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less qui contiendra nos styles personnalisés.

La raison pour laquelle nous avons besoin d'un _extend.lessfichier pour le spécifier @importsest que Magento n'en inclut automatiquement qu'un _extend.lesspar module. Vérifier et ajouter tout cela *_extend.lessautomatiquement prendra du temps et c'est pourquoi il n'a pas été implémenté comme ça.

Dans Magento, les fichiers de thème vierges responsables de mini-cart se trouvent dans /vendor/magento/theme-frontend-blank/Magento_Checkout/

Nous pourrions également ajouter tous nos styles personnalisés directement dans le _extend.less. Cependant, en les divisant en fichiers plus petits et spécifiques comme dans le module d'origine, le code reste clair et mieux organisé. C'est également la méthode recommandée selon les normes Magento 2.


Merci @Jalogut! Donc, je pourrais aussi appeler "_minicart_extend.less" comme "foobar.less" et cela ne ferait aucune différence car c'est ce que vous @importez dans _extend.less qui compte. L'ajout de "_extendd.less" au nom du composant est juste une convention pour vous aider à garder tout plus clair?
Loreena

C'est exactement l'idée.
Jalogut

@Jalogut êtes-vous sûr qu'ils disent ceci "Vérifier et ajouter automatiquement * _extend.less prendra beaucoup de temps" ou c'est votre supposition? parce que l'OMI en prend un peu plus, mais pas tant que ça, pour inciter les développeurs à le faire à chaque fois qu'ils veulent le personnaliser (plus un peu de confusion au début)
medmek
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.