Qual è il modo corretto di posizionare / ordinare i file CSS in Magento 2?

13

Per includere un file CSS, aggiungere il blocco <css src = "<percorso> / <file>" media = "print | <opzione>" /> nella sezione <head> in un file di layout.

Tuttavia, non dice come possiamo influenzare l'ordine dei nostri file CSS. E se aggiungiamo i file CSS in questo modo in un tema personalizzato che ha un tema principale, il risultato è che i file vengono aggiunti nella parte superiore della sezione <head> con molti altri file CSS sottostanti, il che significa che la loro priorità è piuttosto basso e non possiamo facilmente sostituire le regole dal tema o dalle estensioni principali.

C'erano problemi simili in Magento 1 e c'erano soluzioni alternative. Alcuni erano più puliti altri meno.
Qual è il modo migliore per ordinare un file CSS di un tema personalizzato nella parte inferiore di <head> in Magento 2 - se possibile rispettando le linee guida di layout di Magento 2 per i temi personalizzati?

— Jey DWork
fonte

13

Magento2 non ha un meccanismo incorporato per questo, quindi ho deciso di trattarlo come un'opportunità per scrivere la mia prima estensione Magento2. Il estensione Quickshiftin \ Assetorderer è ora disponibile su GitHub!

Una volta installata l'estensione, è possibile specificare un attributo dell'ordine nei tag XML CSS .

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

È inoltre possibile utilizzare l' attributo order nei file XML di layout come default_head_blocks.xml. Tutti i tag CSS per i quali non specifichi un ordine vengono trattati come se avessero un ordine di 1.

— quickshiftin
fonte

Grazie molto. La tua estensione ha funzionato per me. Ma abbiamo affrontato due problemi uno in di.xml e uno nella classe Quickshiftin \ Assetorderer \ View \ Asset \ File.

— Pankaj Pareek,

Ciao @PankajPareek, questa è una buona notizia e una cattiva. Qualche possibilità che puoi elaborare su GitHub e possibilmente contribuire con una richiesta pull? Sarebbe bello rendere l'estensione utile per tutti!

— cambio rapido

@quickshiftin Questa estensione ha funzionato nella v2.0, ma non nella v2.1.1. Tuttavia, ho scoperto per caso che non è più necessario in v2.1.1 perché quando aggiungo order="1"il file viene ordinato correttamente. Non importa quale sia l'attributo fintanto che aggiungi un attributo aggiuntivo. Per convalidarlo, puoi cambiarlo in data-order="1"e funzionerebbe comunque.

— thdoan

ordina il lavoro anche per il file js.

— Jalpesh Patel,

@quickshiftin hai aggiornato il tuo modulo per M2.2.2

— PЯINCƏ

7

È possibile aggiungere l' mediaattributo all'elemento css. Questo lo aggiungerà alla fine di tutti i CSS inclusi nella testa.

<head>
    <css src="css/styles.css" media="all" />
</head>

— andyace
fonte

E se lo volessi prima io?

— TheBlackBenzKid

Questo caricherà ancora CSS personalizzato prima dei principali file CSS principali di magento 2 :(

— Jonathan Marzullo,

A partire da M2.2.1 è l'unica soluzione che ha funzionato per me. L'aggiunta di 'order = "X"' al nodo <css> genera un errore in quanto questo attributo non è consentito.

— Dynomite,

2

Ho risposto in dettaglio qui su come il magento rende css e come sta accadendo l'ordinamento dietro la scena.

Alcuni punti extra che devo menzionare qui sono:

Se si desidera eseguire il rendering del file CSS personalizzato dopo style-m.csse stlyle-l.css, è necessario definire il file CSS come di seguito:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
Se vuoi caricare il tuo file css personalizzato prima style-m.csse stlyle-l.css, allora devi includere il tuo file css attraverso il file xml di layout default_head_blocks.xmle aggiungere il tuo file css personalizzato sopra style-m.csse stlyle-l.css.

Le proprietà CSS sono limitate e sono ben definite nello schema di layout. Secondo lo schema di layout, è possibile utilizzare le seguenti proprietà nel file CSS.

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

Questo significa semplicemente che non è possibile utilizzare ordero altre proprietà insieme alla definizione CSS nel file XML di layout. In questo modo, otterrai un'eccezione che indica che la convalida dello schema ha esito negativo.

— Rajeev K Tomy
fonte

1

Puoi rendere le tue regole CSS più o meno importanti delle regole CSS di base aggiungendo o rimuovendo selettori padre aggiuntivi.
Ad esempio, vediamo una regola CSS di esempio nel core:

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

Puoi rendere più importante la tua regola personalizzata aggiungendo un selettore padre, ad esempio:

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

o

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

Puoi rendere la regola personalizzata meno importante rimuovendo un selettore padre, ad esempio:

.item td.col.item {
    padding: 30px 8px 20px 0;
}

— Mage2.PRO
fonte

3

Certo e anche io potremmo semplicemente smantellare !important(ma ovviamente il tuo approccio è ancora migliore di così) o implementare una classe di prefisso del fornitore con MENO. Tuttavia, ciò comporta costi e complessità inutili. Perché prefissare centinaia o più regole quando una semplice modifica dell'ordine del CSS lo farebbe? Quindi sto ancora cercando un buon modo per risolverlo sul versante del Magento ...

— Jey DWork,

Inoltre, quando si tratta di risorse diverse dal posizionamento CSS potrebbe diventare ancora più importante poiché le soluzioni alternative potrebbero diventare ancora più brutte.

— Jey DWork,

6

Questa non è una risposta

— Ahmad Alfy,