Problèmes avec moins de variables dans _theme.less

Question

J'utilise les requêtes multimédias ci-dessous dans mon _theme.less personnalisé comme

& when (@media-common = true) { }

mais quand j'exécute cette commande bin/magento setup:static-content:deploy je reçois des variables @media-common is undefined in file qu'est-ce qui ne va pas dans ce cas ?Utiliser Grunt compile sans aucune erreur.

Answer 1

@fefe Le @media-common La variable est initialement définie dans :

• vendor/magento/theme-frontend-blank/web/css/styles-m.less

• vendor/magento/theme-frontend-blank/web/css/styles-l.less

C'est si vous utilisez le thème Blank ou Luma en tant que parent.Si tel est le cas, cela s'applique à vous.Sinon, quel que soit votre thème parent, il devrait avoir une déclaration et une initialisation de cette variable... ou si le thème parent que vous utilisez en appelle un autre pour son parent, la même chose s'applique.

Jetez un oeil à styles-m.less et styles-l.less fichiers pour voir l’ordre dans lequel les fichiers sont importés.Vous pouvez également ajouter une forme de journalisation sur \Less_Parser::parseFile().

La façon dont j'ai contourné ce problème est d'utiliser une importation de référence moins Moins de documents :option d'importation de référence, Qui va pas extrayez le code dans ledit fichier Less, cela rendra simplement les fichiers disponibles dans la portée du fichier demandant l'importation.

Un exemple de ce que j'ai importé en haut d'un fichier Less personnalisé :

@import (reference) "../source/lib/variables/_responsive.less"; @import (reference) "../source/lib/_responsive.less";

* Notez le chemin que j'utilise ici par rapport au chemin de fichier Less personnalisé de mon thème personnalisé par rapport à l'éventuel var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/ chemin.

Ma hiérarchie de répertoires de thèmes personnalisés ressemble à ceci : app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less.

Les fichiers que je souhaite importer sont ici :

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/_responsive.less

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/variables/_responsive.less

Mon fichier personnalisé, qui effectuera l'importation, vivra finalement ici :

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/custom/custom.less

Maintenant, avec tout cela dit, voici le kicker, vous n'avez pas vraiment besoin de faire ça.Pourquoi?Eh bien, les styles CSS ne sont-ils pas dans le Gardes CSS, dans ce cas @media-common = true destiné uniquement à être appelé avec le styles-m.less déposer?Oui, car M2 est censé être mobile avant tout et donc le styles-m.less Le fichier est le seul fichier (enregistrez quelques fichiers de courrier électronique, moins et je pense quelques autres) qui a réellement @media-common mis à true (et il n'y a qu'une poignée de fichiers qui définissent même cette variable, point).

Donc, tout ce qui se trouve dans une CSS Guard et qui a la condition de @media-common = true est censé être exécuté toujours, sauf lorsque le styles-l.less le fichier est appelé. styles-l.less ensembles @media-common à false comme le styles-m.less le fichier aurait déjà dû charger ces styles "communs"... et si vous regardez dans vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml tu verras ça styles-m.css (qui est généré à partir de styles-m.less s'il n'est pas déjà généré Documents de développement :Requête .css pour une recherche .less - Plus Ici) est chargé avant styles-l.css.

Cela signifie que vous pouvez littéralement contourner cette erreur en définissant @media-common: true; en haut de votre fichier Less personnalisé et sur la base de ce que j'ai décrit ci-dessus et de ce que je comprends du code jusqu'à présent, cela devrait résoudre l'erreur.

Voici le problème : Que vous incluiez le source/lib/_responsive.less & source/lib/variables/_responsive.less fichiers ou définir les vôtres @media-common: true; en haut de votre fichier personnalisé, cela écrasera le @media-common: false; mission dans styles-l.less, vous allez donc obtenir une duplication de code dans les deux styles-m.less et styles-l.less.Je ne vois aucun moyen de contourner cela pour le moment.Le problème fondamental est que nos fichiers Less personnalisés ne sont pas chargés. après les deux styles-m.less et styles-l.less ou que le @media-common La valeur de la variable n'est pas incluse dans la portée de nos fichiers Less personnalisés.Cela ne devrait pas être le cas si nous importons moins notre personnalisation via le _extend.less fichier, que la documentation (suggère), car vous avez ce qui suit à la fin des deux styles-m.less et styles-l.less:

//@magento_import 'source/_extend.less';

J'espère que cela vous a donné à la fois un aperçu et une solution immédiate à votre problème.

Si vous ou quelqu'un d'autre trouvez une meilleure solution, je suis tout ouïe.

MISE À JOUR Ignorez donc ce que j'ai mentionné ci-dessus concernant la duplication de code.Dans mon cas, j'ajoutais à la fois une inclusion explicite de mon CSS personnalisé dans une page et J'ai également ajouté mon fichier less personnalisé à celui de mon thème _extend.less.

je modifiais app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml pour inclure les éléments suivants :

<head> <!-- ADD PAGE-SPECIFIC STYLES SHEETS HERE --> <css src="css/pages/homepage.css" /> </head>

et j'avais aussi une entrée dans app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less de:

@import "../pages/homepage.less";

Ce que j'ai découvert, c'est que c'est l'un ou l'autre, ou pas les deux.Ainsi, dans ce cas, lorsque M2 essayait de traiter une demande de http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css cela chargerait le approprié homepage.less fichier et ce fichier n'aurait pas @media-common dans son champ d'application, donc l'erreur était révélatrice.Afin de contourner ce problème, ajoutez des références d'importation comme je l'ai mentionné ci-dessus et il n'y aura pas de duplication de code.De plus, mais en supprimant l'entrée de _extend.less mon styles-m.less et styles-l.less je ne chercherai pas le homepage.less fichier et il n’y a pas de duplication de code.

• Mon exemple ici concerne les styles spécifiques à la page d'accueil... mais cela illustre une situation dans laquelle je n'utilisais pas le système correctement et c'est pourquoi j'obtenais cette erreur.J'espère que ça aide