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

10

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?

Francis Kim
quelle
Wo befindet sich die ursprüngliche CSS-Regel?
Aaron Allen
1
Versuchen Sie, dies in web / css / custom.css (einfaches CSS) zu aktualisieren, und vergessen Sie nicht, var / folder und pub / static / content / frontend / yourtheme_package / yourtheme / en_US / entfernen Sie den CSS-Ordner zu entfernen und führen Sie php bin / magento setup: static aus -cotent: Befehl bereitstellen.
Nits
Sie haben in theme.xml "foobar1" zum übergeordneten Thema nicht "foobar"
St3phan

Antworten:

8

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.

Kreismix
quelle
Guter Punkt - vielleicht macht das Thema, das ich verwende (Drittanbieter), etwas Seltsames, aber was Sie sagen, wenn ich die gleiche Überschreibung für das Standardthema mache, sollte ich es nicht verwenden müssen! wichtig. Lohnt sich ein Versuch?
Francis Kim
1
Ich denke , so kann man einfach ein schnelles Thema erstellen nur mit dem registration.php, theme.xmlund die Web - Ordner. Neukompilieren und dann im Admin auswählen und sehen, was passiert. Ich denke, etwas anderes ist los, aber das ist mir als Möglichkeit in den Sinn gekommen.
Circelsix
1
Ebenso wie bei der Überprüfung der Integrität können Sie einen Wert eingeben, der in Ihren Stilen eindeutig ist (ich möchte ihn verwenden, background-color: tomatoda niemand diese Farbe jemals verwenden würde) und in den kompilierten Stilen überprüfen, wo er auf dem Blatt landet. Suchen Sie pub/static/frontend/{package}/{theme}/en_us/cssnach beiden Stildateien. Wenn dies nicht am Ende der Datei ist, wird etwas mit der Standardladereihenfolge verschraubt.
Circelsix
4

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.

Timik
quelle
3

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.

Ben Crook
quelle
0

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

  .home.home {
    display: none;
  }
Victor Sl
quelle
Guter Tipp! Aber leider nicht was ich will.
Francis Kim
0

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.

Dipesh Rangani
quelle