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.