Wie überschreiben Sie LESS in einem benutzerdefinierten Thema?

34

Ich habe den größten Teil dieser Woche damit verbracht, eine klare Anleitung zum Erstellen eines benutzerdefinierten Themas und zum Erweitern des vorhandenen LESS / CSS zu finden, ohne das gesamte magento-blankThema kopieren zu müssen .

Die offizielle Dokumentation enthält Grundlagen zum Überschreiben von Variablen, die jedoch nur in begrenztem Umfang verwendet werden können. Bestehende Anleitungen, wie zum Beispiel Sonassis, scheinen auf einer Beta-Version von Magento 2 zu basieren.

Aus Magento 1 kommend gab es eine kleine Lernkurve, in der herausgefunden wurde, wie WENIGER funktioniert und wie Magento alle Dateien in CSS sammelt. Es hat eine Weile gedauert, bis ich einige Leitfäden durchgesehen und eine klare Antwort darauf erhalten hatte, welche Dateien wann geändert werden sollten, und ich dachte, ich würde mitteilen, was ich gefunden habe, damit zukünftige Benutzer (und ich zukünftig) einen schnellen Einstieg in die Verwendung von LESS in erhalten könnten Magento 2.

andyjv
quelle

Antworten:

58

Hinweis 1: Dies setzt immer voraus, dass Sie erweitern magento-blank.

Anmerkung 2: <theme-dir>istapp/design/frontend/Vendor/theme/

Die Grundlagen: Ändern von Basisvariablen

(für tl; dr, überspringen Sie zum Abschluss)

Die meisten Anleitungen, die ich gefunden habe, behandeln diesen Schritt nur mit WENIGER, daher werde ich versuchen, dies kurz zu halten. Magento 2 verfügt über einen Basissatz von Variablen, die häufig verwendete Aspekte eines Themas definieren. In diesen Variablen werden Farben, Schriftarten, Stil von Seitentiteln usw. definiert.

In <magento-root>/lib/web/css/source/lib/variables/finden Sie eine Reihe intuitiv benannter LESS-Dateien. In jedem dieser Elemente finden Sie Werte, die Variablen für viele der in Magento 2 üblichen Elemente zugewiesen wurden.

Um eine dieser Variablen zu ändern, erstellen Sie einfach eine Datei in <theme-dir>/web/css/source/_theme.less. Beispiel:

@newPrimary: #1980fe;
@primary__color: @newPrimary;


@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);

Technisch gesehen können Sie hier jedes CSS oder WENIGER einfügen, und es wird erfolgreich auf Ihre Site angewendet (aber tun Sie dies nicht). Ich werde gleich erklären, wie das funktioniert.

Hinzufügen einer neuen CSS-Datei

Sie können dem Kopf all Ihrer Vorlagenseiten neues CSS hinzufügen.

Erstellen <theme-dir>/Magento_Theme/layout/default_head_blocks.xml:

<?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="css/myStyle.css" />
        </head>
    </page>

Und dann erstellen Sie eine Datei mit Ihrem neuen CSS oder WENIGER:

<theme-dir>/web/css/myStyle.less. Sie können WENIGER oder CSS hier schreiben.

Vorhandene Stile überschreiben

Ich habe festgestellt, dass Magento 2 LESS nicht einfach durch Hinzufügen einer neuen CSS-Datei ersetzt werden kann. Und hier fing ich an, mich zu verirren, und ich werde erklären, wie Magento 2 seine WENIGER-Dateien findet.

Standardmäßig enthält Magento 2 die folgenden Dateien (und greift letztendlich darauf zurück):

<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles

Diese Dateien enthalten (importieren) andere WENIGER-Dateien, die oft noch mehr WENIGER-Dateien enthalten. Und hier haben mir andere Guides nicht weiter geholfen, und ich werde erklären, was ich gefunden habe, so gut ich konnte.

Die Quelle / lib Magic

In styles-m.lessgibt es die Zeile: @import 'source/lib/_responsive.less';. Sie werden feststellen, dass source/libdas magento-blankThema kein Verzeichnis enthält . Es ist offensichtlich, dass Magento 2-Stile letztendlich auf zurückgreifen <magento-root>/lib/web/css/. Es ist dort, wo Sie finden source/lib/_responsive.less.

Die Variablen, die Sie verwenden, _theme.lesssind aufgrund einer im source/libDesign importierten Datei verfügbar magento-blank. Hinweis: _theme.less Ist eine leere Datei in den Standardthemen. Lesen Sie weiter, um zu erfahren, warum dies wichtig ist.

"Automatisch eingeschlossen" WENIGER Dateien

Ein paar Anleitungen, die ich gefunden habe, bestanden darauf, dass Sie sie erstellen können, <theme-dir>/web/css/_styles.lessda Magento diese Datei automatisch sucht und einschließt. Ich fand das schlecht beraten.

Wenn Sie erstellen <theme-dir>/web/css/_styles.less, wird Ihre Site beschädigt. theme-frontend-blank/web/css/styles-m.lessImporte _styles.less, die wiederum 3 weitere .less-Dateien importieren, wobei jede weitere .less-Dateien importiert.

Wenn Sie ein erstellen _styles.less, überschreiben Sie es. Durch das Überschreiben überschreiben _styles.lessSie alle Dateien, die importiert werden, und alle Dateien, die diese Dateien importieren, und so weiter.

Hinweis zu _theme.less: Diese Datei ist in Standardthemen leer und kann daher problemlos erstellt und hinzugefügt werden, wenn Sie Ihr Thema auf einem Standardthema basieren. Wenn Sie jedoch ein Thema erweitern, das bereits einen Standard erweitert, werden die Chancen_theme.lessbereits genutzt. Wenn Sie das erneut erstellen, wird es außer Kraft gesetzt.

Der magische @magento_import

In sehen styles-m.lessSie ein paar auskommentierte Zeilen:

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

Diese Zeilen sind eigentlich nicht auskommentiert! Magento 2 hat eine spezielle Behandlung für Zeilen, die mit beginnen //@magento_import. Diese Zeilen können nur in Dateien unter eingeschlossen werden <theme-dir>/web/css.

Die obigen Zeilen weisen Magento 2 an, alle Dateien innerhalb des Themas einzuschließen, die dem angegebenen Muster entsprechen. Die obigen Zeilen enthalten also automatisch:

'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';

'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';

'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on

Das Hinzufügen von Dateinamen _widgets.lessund _module.less wird automatisch gefunden und eingeschlossen, auch wenn es sich um ein neues Modul handelt oder um ein Modul, das diese Datei noch nicht enthält.

Beachten Sie, dass Magento-Blank diese Dateien für die meisten Module enthält. Wenn Sie diese Methode verwenden möchten, müssen Sie die Originale kopieren und einfügen (es sei denn, Sie führen einen vollständigen Neustart durch).

Fazit

(Lesen Sie: nicht verwenden _styles.less).

Wenn Sie das CSS eines Elements ändern möchten, möchten Sie das Beste tun, um herauszufinden, in welcher Datei dieser Stil definiert ist. Manchmal müssen Sie nur eine Variable in ändern _theme.less. Ich vermute, dass Sie in den meisten Fällen einfach das _module.lessoder _widgets.lessin Ihr Thema kopieren und die Änderungen vornehmen müssen.

Wenn Sie ein neues Modul erstellt haben oder über neue HTML-Elemente verfügen, müssen Sie möglicherweise eine WENIGER-Datei erstellen und diese <head>auf jeder Seite separat einfügen .

In komplizierten Fällen müssen Sie möglicherweise ein neues @importoder erstellen @magento_import. Sie möchten das niedrigste Kind finden, das Sinn macht für das, was Sie tun, damit Sie nicht unnötige Dateien kopieren oder verwirrende @importZeilen hinzufügen, die scheinbar nirgendwo hinführen.

andyjv
quelle
1
Gut gemacht, ich stimme auch zu, dass es besser ist, eine separate CSS-Datei in den Kopf aufzunehmen, wenn Sie Ihre eigenen Elemente erstellen (vorausgesetzt, sie werden nicht auf allen Seiten geladen). Ich bin kein Fan der Magento-Themes, die jeder Seite alle Stile hinzufügen.
Ben Crook
1
Wie die ausführliche Antwort. Nur eine Einschränkung: Wenn Sie die Anweisungen // @magento_import verwenden, ist es nicht möglich, weniger Compiler von Drittanbietern wie die in gulp enthaltenen zu verwenden, was viele von uns tun, um die Geschwindigkeit zu erhöhen.
Robert Egginton
Tolle Erklärung! Millionen Dank dafür. Ich bin auf Magento 2.1.0 und ich muss entfernen var/view_preprocessed/css/frontend/VENDOR/THEME/loca_LE/css/*, damit die CSS neu generiert werden
Alexandru Bangală
Hallo! Ich versuche, meinen neuen Code dieser neuen Klasse für _extends.less zu app / design / frontend / Vendor / theme / css / source hinzuzufügen. Aber das klappt nicht. Bitte helfen Sie magento.stackexchange.com/questions/151940/…
Sylon
6
Please metnion_extend.less
Stevie G