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

14

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?

— Jey DWork
źródło

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:

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" />
```
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.

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