Überschreiben leerer Themenstile in Magento 2

10

Wie würden Sie die Navigationsstile für ein benutzerdefiniertes Thema überschreiben, wenn Sie von dem leeren Thema in Magento 2 erben?

Ich habe eine theme.cssDatei in meinem app/design/frontend/<Vendor>/<theme>/web/cssOrdner, aber mir ist bekannt, dass Magento 2 WENIGER verwendet. Ich kann die Stile in meinem theme.cssStylesheet leicht überschreiben , möchte sie aber nicht weiter verwenden müssen !important.

Außerdem verwende ich Bootstrap 3 und gehe davon aus, dass die Stile aus dem leeren Thema alle Stilanweisungen überschreiben, die in Bootstrap übereinstimmen. Was ist der beste Weg, um dies zu erreichen?

magento2 overrides css less Gareth Daine
quelle

Antworten:

15

Die zwei von Magento empfohlenen Methoden zum Überschreiben oder Erweitern der Stile eines übergeordneten Themas:

1. Einfacher Weg

Erweitern:

Erstellen Sie in Ihrem Themenverzeichnis ein web/css/sourceUnterverzeichnis. (Sie haben diesen Teil bereits erledigt.) Erstellen Sie dort eine _extend.lessDatei.

Laut Dokumentation :

"Das Erweitern eines Themas mit _extend.less ist die einfachste Option, wenn Sie mit allem, was das übergeordnete Thema hat, zufrieden sind, aber weitere Stile hinzufügen möchten."

Überschreiben:

Anstatt die _extend.lessDatei zu erstellen, erstellen Sie eine _theme.lessDatei. In diesem Fall müssen Sie alle benötigten Variablen vom übergeordneten Element kopieren _theme.less, einschließlich derjenigen, die nicht geändert werden. Nehmen Sie dann Ihre Änderungen vor.

Der Dokumentation zufolge ist der Nachteil:

"Sie müssen Ihre Dateien überwachen und manuell aktualisieren, wenn das _theme.less des Elternteils aktualisiert wird."

2. Strukturierter Weg

Erweitern:

Mit dieser Methode können Sie Ihren Code besser organisieren. Ihre Änderungen werden strukturiert. Anstatt eine einzelne _extend.less Datei zu verwenden, um alle Ihre Änderungen einzuschließen, erstellen Sie eine Erweiterungsdatei für jede Komponente aus der Magento-UI-Bibliothek, die Sie ändern möchten.

Angenommen, Sie möchten Stile aus Schaltflächen- und Navigationskomponenten erweitern. Erstellen Sie in Ihrem Themenverzeichnis zwei Dateien: _buttons_extend.lessund _navigation_extend.lessfügen Sie dann Ihre Änderungen für jede Komponente in die entsprechende Datei ein.

Dann erstellen Sie die _extend.lessDatei und fügen diesen Code hinzu:

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

Überschreiben:

In Ihrem Thema, erstellen Sie eine Kopie der Datei auf die UI - Komponente entspricht , die Sie ändern möchten ( _buttons.less, _navigation.lessusw.) Diese Datei wird das außer Kraft setzen _buttons.lessder übergeordneten Thema.

Es ist wichtig, den Unterschied zwischen Überschreiben und Erweitern zu beachten .

Weitere Informationen zum Überschreiben und Erweitern in dieser Dokumentation oder zu CSS in Magento 2 finden Sie im Frontend-Entwicklerhandbuch .

Luis Garcia
quelle
Nehmen wir also an, ich habe einen Vendor_Namespace-Ordner, füge dort einen weiteren Ordner mit dem Namen "web / css / source / _extend.less" hinzu und die _extend.less-Datei in web / css / source / weiß, wo sich die entsprechende Datei befindet? Verstehe ich das richtig
Max
Ja, erstellen Sie einfach die Datei web/css/source/_extend.lessund fügen Sie Ihre Stile dort ein.
Luis Garcia
Ich habe eine _extend.less-Datei mit dem Import eines _slider.less erstellt: <theme_folder> / css / source / beide Dateien befinden sich im selben Pfad, funktionieren jedoch nicht. Alle Regeln in _slider.less wurden nicht in von .css generierten Dateien gefunden. Ich bin im Entwicklermodus und führe "php magento setup: static-content: deploy" aus
xzegga
Haben Sie den Cache Ihres Browsers gelöscht?
Luis Garcia
1
Kann ich <theme_folder> / css / source / lib / variables überschreiben? Wie kann ich eine Variable einer weniger großen Datei ändern? (Nehmen wir zum Beispiel an, ich möchte den @ button-Hintergrund überschreiben.) Ich muss ihn in _buttons_extend.less schreiben oder ich kann alle lin / web / css / source überschreiben / lib / variables
Goldy
5

Ich hatte ein ähnliches Problem mit Foundation. Der offizielle Weg, dies zu tun, besteht darin, die weniger Dateien des spezifischen Moduls zu überschreiben und das CSS dort zu ändern. Es wird dann von Magento während der Kompilierung aufgenommen

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

Letztendlich habe ich alle Standard-CSS-Dateien von Magento entfernt. Ich fand es viel einfacher, benutzerdefiniertes CSS zu schreiben, insbesondere mit einem Framework wie Bootstrap, als zu versuchen, alle verschiedenen Module zu überschreiben. Sie können dies tun in:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>
Mike Stumpf
quelle
Guter Weg, um Sachen zu begehen. Bei der Frage geht es jedoch darum, ein vollständiges Thema zu "erweitern" und mehr hinzuzufügen.
Miguel Felipe Guillen Calo
Nein, bei der Frage geht es um das Überschreiben.
Schwarz
0

Nehmen wir an, Sie möchten styles-m.css überschreiben , dann die Kopie web/cssIhres Themas einfügen und es custom-styles-m.css nennen .

Verwenden Sie dann diesen Code in Ihren Designs 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>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...
Schwarz
quelle