Problèmes avec moins de variables dans _theme.less
-
29-09-2020 - |
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.
La solution
@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