Magento 2 - Überschreiben von CSS ohne Verwendung! Wichtig überall

Ich arbeite gerade an einer Magento 2-Site für einen Kunden. Angenommen, die Marke meines Kunden ist boofarund das Thema, das ich erweitern / überschreiben möchte, ist das, das foobarich als übergeordnetes Thema festgelegt habefrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Dann frontend/Foobarthemes/boofar/web/css/source/_theme.lesshabe ich unter den CSS-Code geschrieben, den ich überschreiben möchte. Ich habe das auch mit versucht _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

Ich bin gezwungen, !importantalles zu verwenden, um hier zu arbeiten. Keines der Schrift- und Textmaterialien funktioniert im obigen Code.

Habe ich den Magento 2-Frontend-Workflow nicht richtig verstanden?

Sie möchten Ihre Stile nur in der _theme.lessDatei haben, wenn Sie die Datei des übergeordneten Themas überschreiben möchten _theme.less. Für diese Datei wird nur eine geladen, und es wird immer das ausgewählte Thema sein, wenn die Datei dort vorhanden ist. Von dort aus wird das Fallback-Schema verwendet, um diese Datei zu finden und zu verwenden.

In Ihrem Fall ist die Verwendung der _extend.lessDatei die richtige.

Dies ist jedoch etwas verwirrend, da der Code, der in die _extend.lessDatei eingefügt wird, zuletzt geladen wird, wenn Magento alle auf der Site vorhandenen Stile kompiliert. Ich frage mich also, ob etwas mit der Ladereihenfolge zu tun hat.

Wenn Sie sich ansehen, wie Sie es eingerichtet haben, versuchen Sie, Ihr Thema in einem anderen Namespace und nicht in demselben Thema einzurichten. Dies löst das Problem möglicherweise nicht, da die Art und Weise, wie Sie Ihr Thema eingerichtet haben, dieselbe ist wie die von Magento, in der das Luma / Blank-Thema eingerichtet ist. Aber für all die Arbeit, die ich geleistet habe, habe ich meinen Vender-Namespace, der sich dann entweder von einem Drittanbieter-Thema oder von Luma / Blank erstreckt.

Das nächste, was Sie versuchen sollten, wäre, Ihren Code in die integrierten Medienabfragen zu verpacken. Ich gehe hier näher darauf ein , aber im Grunde verhindert es, dass Ihre Stile zweimal in die styles-l.cssund die styles-m.cssDateien geladen werden.

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

Von da an kommt es auf die CSS-Spezifität an. Wenn es etwas anderes gibt, das höher ist als deins, müssen Sie in Ihrer Klassen- / ID-Definition in den Stilen spezifischer sein. Möglicherweise möchten Sie ein Bild der DOM-Struktur veröffentlichen, um zu zeigen, worauf Sie abzielen und was über dem Ziel liegt, auf das Sie abzielen.

Wenn Sie Ihre Stile in der Datei _extend.less anwenden können, bedeutet dies, dass Sie Probleme mit der CSS-Spezifität haben. Da Magento2 weniger Kompilierung verwendet, sind die meisten Stile sehr spezifisch. Um sie zu überschreiben, müssen Ihre Stilauswahl mehr oder gleich spezifisch sein. Ich werde hier keine Details des Konzepts selbst veröffentlichen, da online zahlreiche Artikel zu finden sind.

Wenn Sie das Standard-WENIGER-Setup verwenden, stellen Sie sicher, dass ALLE WENIGER in den M2 LESS-Medienabfragen geschrieben sind. Wenn Sie dies nicht tun, werden Sie doppeltes CSS und wahrscheinlich Spezifitätsprobleme haben.

Dies alles hängt von der Spezifität und der Ladereihenfolge ab. Ihr CSS sollte nach den übergeordneten Themen (oder Modulen) geladen werden. Um dies zu überschreiben, müssen Sie lediglich deren Spezifität erfüllen.

Zum Beispiel, wenn das übergeordnete Thema verwendet

.parent-selector .selector {
    ...
}

Dann müssten Sie denselben Selektor schreiben. Wenn dies aus irgendeinem Grund nicht funktioniert, müssen Sie nur einen weiteren Selektor hinzufügen. Eine einfache Möglichkeit besteht darin, einen Körper davor hinzuzufügen, da er jeden Selektor abdeckt und Spezifität hinzufügt. Wie so:

body .parent-selector .selector {
    ...
}

Dieser Artikel enthält einige gute Informationen zur CSS-Spezifität.

Alternativ können Sie die gesamte Datei überschreiben

Wenn Sie viele Anpassungen vornehmen, ist es besser, die gesamte Datei zu überschreiben, anstatt sie zu erweitern. Fügen Sie dazu einfach die Datei mit demselben Dateipfad und Namen zu Ihrem Thema hinzu.

Für eine höhere Priorität können Sie den Selektor duplizieren:

  .home.home {
    display: none;
  }

Sie müssen dieselbe .lessDatei des übergeordneten Themas überschreiben, die Sie überschreiben möchten. Wenn Sie beispielsweise eine _theme.lessDatei überschreiben möchten , müssen Sie diese Datei hier in das untergeordnete Thema kopieren (stellen Sie sicher, dass derselbe Pfad des übergeordneten Themas vorhanden ist).

frontend/Foobarthemes/boofar/web/css/source/_theme.less

Sie können Ihr CSS hier überschreiben.

Injizieren Sie Ihre benutzerdefinierten CSS-Dateien ist besser.

Lesen Sie mehr: So fügen Sie eine benutzerdefinierte CSS-Datei in Magento 2 hinzu

Und Magierdokumente: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

Denken Sie daran, mit grunt / less zu kompilieren, um das CSS zu verarbeiten: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html