Wie kann man CSS-Dateien in Magento 2 richtig positionieren / ordnen?

13

Im Magento 2 DevDoc heißt es

Um eine CSS-Datei einzuschließen, fügen Sie den Block <css src = "<Pfad> / <Datei>" media = "print | <Option>" /> im Abschnitt <head> einer Layoutdatei hinzu.

Es sagt jedoch nicht aus, wie wir die Reihenfolge unserer CSS-Dateien beeinflussen können. Und wenn wir CSS-Dateien auf diese Weise in ein benutzerdefiniertes Thema einfügen, das ein übergeordnetes Thema hat, werden die Dateien ganz oben im Abschnitt <head> mit vielen anderen CSS-Dateien darunter hinzugefügt, was bedeutet, dass ihre Priorität sehr hoch ist niedrig und wir können nicht einfach Regeln aus dem übergeordneten Thema oder Erweiterungen überschreiben.

Es gab ähnliche Probleme in Magento 1 und es gab Workarounds. Einige waren sauberer, andere weniger.
Wie kann in Magento 2 eine CSS-Datei eines benutzerdefinierten Themas am unteren Rand von <head> am besten bestellt werden - wenn möglich, unter Einhaltung der Magento 2-Layoutrichtlinien für benutzerdefinierte Themen?

magento2 layout css head Jey DWork
quelle

Antworten:

13

In Magento2 ist hierfür kein Mechanismus integriert. Daher habe ich beschlossen, dies als Gelegenheit zu betrachten, um meine erste Magento2-Erweiterung zu schreiben. Die Quickshiftin \ Assetorderer-Erweiterung ist jetzt auf GitHub verfügbar!

Sobald Sie die Erweiterung installiert haben, können Sie ein Auftragsattribut in Ihren CSS- XML-Tags angeben .

<head>
  <css src="css/page/home.css" order="100"/>
</head>

Sie können das order- Attribut auch in Layout-XML-Dateien verwenden, z default_head_blocks.xml. Alle CSS- Tags, für die Sie keine Reihenfolge angeben , werden so behandelt, als hätten sie eine Reihenfolge von 1.

quickshiftin
quelle
Danke vielmals. Ihre Nebenstelle hat für mich funktioniert. Es gab jedoch zwei Probleme, eines in der Datei di.xml und eines in der Klasse Quickshiftin \ Assetorderer \ View \ Asset \ File.
Pankaj Pareek
Hi @PankajPareek, das sind gute und schlechte Neuigkeiten. Gibt es eine Chance, auf GitHub näher einzugehen und möglicherweise eine Pull-Anfrage einzureichen? Es wäre schön, die Erweiterung für alle nutzbar zu machen!
Quickshiftin
@quickshiftin Diese Erweiterung funktionierte in v2.0, aber nicht in v2.1.1. Ich habe jedoch zufällig herausgefunden, dass es in Version 2.1.1 nicht mehr erforderlich ist, da order="1"die Datei beim Hinzufügen korrekt sortiert wird. Es spielt keine Rolle, um welches Attribut es sich handelt, solange Sie ein zusätzliches Attribut hinzufügen. Um es zu validieren, können Sie es in ändern data-order="1"und es würde immer noch funktionieren.
Donnerstag,
Auftragsarbeit für js Akte auch.
Jalpesh Patel
@quickshiftin haben Sie Ihr Modul für die M2.2.2
PЯINCƏ
7

Sie können das mediaAttribut dem CSS-Element hinzufügen . Dies fügt es am Ende aller enthaltenen CSS in den Kopf.

<head>
    <css src="css/styles.css" media="all" />
</head>
andyace
quelle
Was ist, wenn ich es zuerst will?
TheBlackBenzKid
Hiermit wird noch benutzerdefiniertes CSS geladen, bevor die Haupt-CSS-Dateien von Magento 2 geladen werden :(
Jonathan Marzullo
Ab M2.2.1 ist es die einzige Lösung, die für mich funktioniert hat. Das Hinzufügen von 'order = "X"' zum <css> -Knoten führt zu einem Fehler, da dieses Attribut nicht zulässig ist.
Dynomite
2

Ich habe hier ausführlich geantwortet, wie Magento CSS rendert und wie die Bestellung hinter den Kulissen abläuft.

Einige zusätzliche Punkte, die ich hier erwähnen muss, sind:

  1. Wenn Sie Ihre benutzerdefinierte CSS-Datei nach style-m.cssund rendern möchten, stlyle-l.cssmüssen Sie Ihre CSS-Datei wie folgt definieren:

    <css src="Magento_Theme:css/path/file.css" media="all" />

  2. Wenn Sie Ihre benutzerdefinierte CSS-Datei vor style-m.cssund laden möchten, stlyle-l.cssmüssen Sie Ihre CSS-Datei über die XML-Layoutdatei einfügen default_head_blocks.xmlund Ihre benutzerdefinierte CSS-Datei über style-m.cssund hinzufügen stlyle-l.css.

  3. CSS-Eigenschaften sind endlich und im Layoutschema gut definiert. Entsprechend dem Layoutschema können Sie die folgenden Eigenschaften in Ihrer CSS-Datei verwenden.

    Datei: vendor/magento/framework/View/Layout/etc/head.xsd

    <xs:complexType name="linkType">
    <xs:attribute name="src" type="xs:string" use="required"/>
    <xs:attribute name="defer" type="xs:string"/>
    <xs:attribute name="ie_condition" type="xs:string"/>
    <xs:attribute name="charset" type="xs:string"/>
    <xs:attribute name="hreflang" type="xs:string"/>
    <xs:attribute name="media" type="xs:string"/>
    <xs:attribute name="rel" type="xs:string"/>
    <xs:attribute name="rev" type="xs:string"/>
    <xs:attribute name="sizes" type="xs:string"/>
    <xs:attribute name="target" type="xs:string"/>
    <xs:attribute name="type" type="xs:string"/>
    <xs:attribute name="src_type" type="xs:string"/>
</xs:complexType>

    Dies bedeutet einfach, dass Sie orderkeine anderen Eigenschaften zusammen mit der CSS-Definition in Ihrer Layout-XML-Datei verwenden können. Auf diese Weise erhalten Sie eine Ausnahme, die darauf hinweist, dass die Schemaüberprüfung fehlschlägt.

Rajeev K Tomy
quelle
1

Sie können Ihre CSS-Regeln wichtiger oder weniger wichtig als die Kern-CSS-Regeln machen, indem Sie zusätzliche übergeordnete Selektoren hinzufügen oder entfernen.
Sehen wir uns zum Beispiel eine Beispiel-CSS-Regel im Kern an:

.cart.table-wrapper .item .col.item {
    padding: 20px 8px 20px 0;
}

Sie können Ihre benutzerdefinierte Regel wichtiger machen, indem Sie einen übergeordneten Selektor hinzufügen. Beispiel:

body .cart.table-wrapper .item .col.item {
    padding: 10px 8px 20px 0;
}

oder

body .cart.table-wrapper .item td.col.item {
    padding: 10px 8px 20px 0;
}

Sie können Ihre benutzerdefinierte Regel weniger wichtig machen, indem Sie einen übergeordneten Selektor entfernen. Beispiel:

.item td.col.item {
    padding: 30px 8px 20px 0;
}
Mage2.PRO
quelle
3
Klar und ich könnten auch einfach nach unten klatschen !important(aber natürlich ist Ihr Ansatz immer noch besser als das) oder eine Herstellerpräfixklasse mit WENIGER implementieren. Dies erhöht jedoch den Aufwand und die Komplexität. Warum Hunderte oder mehr Regeln voranstellen, wenn eine einfache Änderung der CSS-Reihenfolge dies bewirken würde? Ich bin also immer noch auf der Suche nach einem guten Weg, um dieses
Problem
Außerdem wird die Positionierung in Bezug auf andere Ressourcen als CSS möglicherweise noch wichtiger, da die Problemumgehungen möglicherweise noch hässlicher werden.
Jey DWork
6
Das ist keine Antwort
Ahmad Alfy