Probleme mit weniger Variablen in _theme.less

Question

Ich verwende die folgenden Medienabfragen in meinem benutzerdefinierten _theme.less-Like

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

aber wenn ich diesen Befehl ausführe bin/magento setup:static-content:deploy Ich werde variabel @media-common is undefined in file Was ist in diesem Fall falsch?Die Verwendung von Grunt kompiliert ohne Fehler.

Answer 1

@fefe Das @media-common Die Variable wird anfänglich entweder wie folgt festgelegt:

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

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

Das ist Wenn Sie verwenden entweder das leere oder das Luma-Design als übergeordnetes Element.Wenn ja, dann trifft dies auf Sie zu.Wenn nicht, sollte es bei jedem übergeordneten Thema eine Deklaration und Initialisierung dieser Variablen geben ... oder wenn das von Ihnen verwendete übergeordnete Thema ein anderes für sein übergeordnetes Thema aufruft, gilt das Gleiche.

Werfen Sie einen Blick auf die styles-m.less Und styles-l.less Dateien, um die Reihenfolge anzuzeigen, in der weniger Dateien importiert werden.Sie können auch eine Form der Protokollierung hinzufügen \Less_Parser::parseFile().

Ich habe dies umgangen, indem ich einen Less-Referenzimport verwendet habe Weniger Dokumente:Referenzimportoption, welches wird nicht Ziehen Sie den Code in die Less-Datei ein. Dadurch werden die Dateien nur im Rahmen der Datei verfügbar gemacht, die den Import anfordert.

Ein Beispiel dafür, was ich oben in eine benutzerdefinierte Less-Datei importiert habe:

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

*Beachten Sie den Pfad, den ich hier verwende, im Verhältnis zum benutzerdefinierten Less-Dateipfad meines benutzerdefinierten Themas im Verhältnis zum endgültigen var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/ Weg.

Meine benutzerdefinierte Theme-Verzeichnishierarchie sieht so aus: app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less.

Die Dateien, die ich importieren möchte, sind hier:

• 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

Meine benutzerdefinierte Datei, die den Import durchführt, wird irgendwann hier leben:

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

Nun, nachdem das alles gesagt ist, hier ist der Clou: Sie müssen das nicht wirklich tun.Warum?Nun, sind das nicht die CSS-Stile innerhalb der CSS-Guards, in diesem Fall @media-common = true soll nur mit dem aufgerufen werden styles-m.less Datei?Ja, denn M2 soll in erster Linie mobil sein und daher das styles-m.less Datei ist die einzige Datei (außer einigen E-Mail-Dateien und, glaube ich, ein paar anderen), die tatsächlich vorhanden ist @media-common einstellen true (und es gibt nur eine Handvoll Dateien, die diese Variable, Punkt, überhaupt festlegen).

Also alles, was sich innerhalb eines CSS Guard befindet und die Bedingung hat @media-common = true soll immer ausgeführt werden, außer wenn die styles-l.less Datei aufgerufen wird. styles-l.less Sätze @media-common Zu false als die styles-m.less Die Datei sollte diese „allgemeinen“ Stile bereits geladen haben ... und wenn Sie hineinschauen vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml das wirst du sehen styles-m.css (was generiert wird aus styles-m.less falls es noch nicht generiert wurde Entwicklerdokumente:.css-Anfrage zur .less-Suche - Mehr Hier) wird vorher geladen styles-l.css.

Das bedeutet, dass Sie diesen Fehler durch Definieren buchstäblich umgehen könnten @media-common: true; am Anfang Ihrer benutzerdefinierten Less-Datei und basierend auf dem, was ich oben beschrieben habe und was ich bisher über den Code verstehe, sollte das den Fehler beheben.

Hier ist das Problem: Ob Sie das einbeziehen source/lib/_responsive.less & source/lib/variables/_responsive.less Dateien erstellen oder eigene Dateien definieren @media-common: true; am Anfang Ihrer benutzerdefinierten Datei wird dies überschrieben @media-common: false; Aufgabe in styles-l.less, sodass es in beiden Fällen zu einer Codeduplizierung kommt styles-m.less Und styles-l.less.Daran sehe ich im Moment keinen Ausweg.Das Hauptproblem besteht darin, dass unsere benutzerdefinierten Less-Dateien nicht geladen werden nach beide styles-m.less Und styles-l.less oder dass die @media-common Der Wert der Variablen wird nicht in den Bereich unserer benutzerdefinierten Less-Dateien übernommen.Dies sollte nicht der Fall sein, wenn wir unsere benutzerdefinierten Less über importieren _extend.less Datei, die in den Dokumenten (vorgeschlagen) angezeigt wird, da Sie am Ende beider Folgendes haben styles-m.less Und styles-l.less:

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

Ich hoffe, dass Ihnen dies sowohl einen Einblick als auch eine sofortige Lösung für Ihr Problem verschafft hat.

Wenn Sie oder jemand anderes eine bessere Lösung findet, bin ich ganz Ohr.

AKTUALISIEREN Ignorieren Sie also, was ich oben bezüglich der Codeduplizierung erwähnt habe.In meinem Fall habe ich beide eine explizite Einbindung meines benutzerdefinierten CSS in eine Seite hinzugefügt Und Ich habe auch meine benutzerdefinierte Less-Datei zu meinen Themes hinzugefügt _extend.less.

Ich habe es geändert app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml Folgendes einzuschließen:

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

und ich hatte auch einen Eintrag in app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less von:

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

Was ich herausgefunden habe ist, dass es entweder oder, nicht beides ist.In diesem Fall versuchte M2, eine Anfrage zu bearbeiten http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css es würde das entsprechende laden homepage.less Datei und diese Datei hätte es nicht getan @media-common innerhalb seines Geltungsbereichs, daher war der Fehler aufschlussreich.Um dies zu umgehen, fügen Sie wie oben erwähnt Importverweise hinzu, damit es nicht zu einer Codeduplizierung kommt.Darüber hinaus aber den Eintrag entfernen aus _extend.less Mein styles-m.less Und styles-l.less Werde nicht danach suchen homepage.less Datei und es gibt keine Codeduplizierung.

• Mein Beispiel hier ist für Homepage-spezifische Stile ... aber dies zeigt eine Situation, in der ich das System nicht richtig verwendet habe und deshalb diese Fehlermeldung erhalten habe.ich hoffe das hilft