Jaki jest właściwy sposób pozycjonowania / zamawiania plików CSS w Magento 2?

14

W Magento 2 DevDoc jest napisane

Aby dołączyć plik CSS, dodaj blok <css src = "<ścieżka> / <plik>" media = "print | <option>" /> w sekcji <head> w pliku układu.

Nie mówi jednak, jak możemy wpłynąć na kolejność plików CSS. A jeśli dodamy w ten sposób pliki CSS do motywu niestandardowego z motywem nadrzędnym, pliki zostaną dodane całkiem na górze sekcji <head>, a pod nimi wiele innych plików CSS, co oznacza, że ​​ich priorytet jest dość wysoki niski i nie możemy łatwo zastąpić reguł z nadrzędnego motywu lub rozszerzeń.

Podobne problemy występowały w Magento 1 i były obejścia. Niektóre były bardziej czyste, inne mniej.
Jaki jest najlepszy sposób na zamówienie pliku CSS niestandardowego motywu na dole <head> w Magento 2 - jeśli to możliwe, zgodnie z wytycznymi układu Magento 2 dla niestandardowych motywów?

magento2 layout css head Jey DWork
źródło

Odpowiedzi:

14

Magento2 nie ma do tego wbudowanego mechanizmu, dlatego postanowiłem potraktować to jako okazję do napisania mojego pierwszego rozszerzenia Magento2. Rozszerzenie Quickshiftin \ Assetorderer jest teraz dostępne na GitHub!

Po zainstalowaniu rozszerzenia możesz określić atrybut zamówienia w tagach XML css .

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

Możesz także użyć atrybutu order w plikach XML układu, takich jak default_head_blocks.xml. Wszelkie tagi css , dla których nie określasz kolejności, są traktowane tak, jakby miały kolejność 1.

szybka zmiana
źródło
Wielkie dzięki. Twoje rozszerzenie działało dla mnie. Ale napotkałem dwa problemy: jeden w di.xml i jeden w Quickshiftin \ Assetorderer \ View \ Asset \ File.
Pankaj Pareek
Cześć @PankajPareek, to dobra i zła wiadomość. Czy jest jakaś szansa na rozwinięcie GitHub i ewentualnie wysłanie prośby o wycofanie? Byłoby miło, gdyby rozszerzenie było przydatne dla wszystkich!
szybka zmiana w
@quickshiftin To rozszerzenie działało w wersji 2.0, ale nie w wersji 2.1.1. Dowiedziałem się jednak przypadkiem, że nie jest już wymagany w wersji 2.1.1, ponieważ po dodaniu order="1"plik jest porządkowany poprawnie. Nie ma znaczenia, jaki jest atrybut, o ile dodasz dodatkowy atrybut. Aby go sprawdzić, możesz go zmienić na data-order="1"i nadal będzie działać.
thdoan
zamów także pracę dla pliku js.
Jalpesh Patel,
@ quickshiftin czy zaktualizowałeś moduł M2.2.2
PЯINCƏ
7

Możesz dodać mediaatrybut do elementu css. Spowoduje to dodanie go na końcu wszystkich zawartych CSS w głowie.

<head>
    <css src="css/styles.css" media="all" />
</head>
andyace
źródło
Co jeśli najpierw chcę?
TheBlackBenzKid
To nadal ładuje niestandardowy CSS przed głównymi plikami CSS Magento 2 :(
Jonathan Marzullo,
Od wersji M2.2.1 jest to jedyne rozwiązanie, które działało dla mnie. Dodanie „order =" X "do węzła <css> generuje błąd, ponieważ ten atrybut jest niedozwolony.
Dynomite
2

I odpowiedział szczegółowo tutaj o tym, jak Magento czyni CSS i jak zamawianie dzieje się za sceną.

Kilka dodatkowych punktów, o których muszę tu wspomnieć, to:

  1. Jeśli chcesz renderować swój niestandardowy plik css po style-m.cssi stlyle-l.css, musisz zdefiniować plik css, jak poniżej:

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

  2. Jeśli chcesz załadować niestandardowy plik css przed style-m.cssi stlyle-l.css, musisz dołączyć plik css do pliku xml układu default_head_blocks.xmli dodać niestandardowy plik css powyżej style-m.cssi stlyle-l.css.

  3. Właściwości CSS są skończone i dobrze zdefiniowane w schemacie układu. Zgodnie ze schematem układu w pliku css można użyć następujących właściwości.

    Plik: 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>

    Oznacza to po prostu, że nie możesz używać orderani żadnych innych właściwości wraz z definicją css w pliku xml układu. W ten sposób otrzymasz wyjątek wskazujący na niepowodzenie sprawdzania poprawności schematu.

Rajeev K Tomy
źródło
1

Możesz uczynić swoje reguły CSS mniej lub bardziej ważnymi niż podstawowe reguły CSS, dodając lub usuwając dodatkowe selektory nadrzędne.
Na przykład zobaczmy przykładową regułę CSS w rdzeniu:

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

Możesz zwiększyć ważność niestandardowej reguły, dodając selektor nadrzędny, na przykład:

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

lub

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

Możesz sprawić, że Twoja reguła niestandardowa będzie mniej ważna, usuwając selektor nadrzędny, na przykład:

.item td.col.item {
    padding: 30px 8px 20px 0;
}
Mage2.PRO
źródło
3
Jasne i ja też możemy po prostu spryskać !important(ale oczywiście twoje podejście jest jeszcze lepsze) lub zaimplementować klasę prefiksu dostawcy za pomocą LESS. Nadal powoduje to niepotrzebne koszty ogólne i złożoność. Po co prefiksować setki lub więcej reguł, skoro wystarczy prosta zmiana CSS? Więc wciąż szukam dobrego sposobu na rozwiązanie tego po stronie Magento ...
Jey DWork
Poza tym, jeśli chodzi o inne zasoby, pozycjonowanie CSS może stać się jeszcze ważniejsze, ponieważ obejścia mogą stać się jeszcze bardziej brzydsze.
Jey DWork
6
To nie jest odpowiedź
Ahmad Alfy