Apa cara yang tepat untuk memposisikan / memesan file CSS di Magento 2?

13

Untuk memasukkan file CSS, tambahkan blok <css src = "<path> / <file>" media = "print | <option>" /> di bagian <head> dalam file layout.

Namun itu tidak mengatakan bagaimana kita dapat mempengaruhi urutan file CSS kita. Dan jika kita menambahkan file CSS dengan cara ini dalam tema khusus yang memiliki tema induk, hasilnya adalah bahwa file ditambahkan cukup di bagian atas bagian <head> dengan banyak file CSS lain di bawahnya, artinya prioritas mereka cukup rendah dan kami tidak dapat dengan mudah mengesampingkan aturan dari tema atau ekstensi induk.

Ada masalah serupa di Magento 1 dan ada solusi. Beberapa lebih bersih dan lainnya kurang.
Apa cara terbaik untuk memesan file CSS dari tema khusus di bagian bawah <head> di Magento 2 - jika mungkin mematuhi panduan tata letak Magento 2 untuk tema khusus?

— Jey DWork
sumber

13

Magento2 tidak memiliki mekanisme bawaan untuk ini, jadi saya memutuskan untuk memperlakukannya sebagai kesempatan untuk menulis ekstensi Magento2 pertama saya. The ekstensi Quickshiftin \ Assetorderer sekarang tersedia di GitHub!

Setelah ekstensi terpasang, Anda dapat menentukan atribut pesanan di tag XML css Anda .

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

Anda juga dapat menggunakan atribut pesanan dalam tata letak file XML seperti default_head_blocks.xml. Setiap css tag Anda tidak menentukan urutan untuk diperlakukan seolah-olah mereka memiliki perintah dari 1.

— quickshiftin
sumber

Terimakasih banyak. Ekstensi Anda bekerja untuk saya. Tetapi menghadapi dua masalah satu di di.xml dan satu di Quickshiftin \ Assetorderer \ View \ Asset \ File class.

— Pankaj Pareek

Hai @PankajPareek, itu kabar baik dan buruk. Apakah ada peluang Anda bisa menguraikan GitHub dan mungkin berkontribusi permintaan tarik? Alangkah baiknya untuk membuat ekstensi berguna untuk semua orang!

— quickshiftin

@quickshiftin Ekstensi ini berfungsi di v2.0, tetapi tidak v2.1.1. Namun, saya mengetahui secara kebetulan bahwa itu tidak diperlukan lagi di v2.1.1 karena ketika saya menambahkan order="1"file akan dipesan dengan benar. Apa pun atributnya, asalkan Anda menambahkan atribut tambahan. Untuk membuatnya valid, Anda dapat mengubahnya data-order="1"dan itu masih berfungsi.

— thdoan

memesan pekerjaan untuk file js juga.

— Jalpesh Patel

@quickshiftin, apakah Anda telah memperbarui modul Anda untuk M2.2.2

— PЯINCƏ

7

Anda dapat menambahkan mediaatribut ke elemen css. Ini akan menambahkannya ke akhir semua CSS yang disertakan di kepala.

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

— andyace
sumber

Bagaimana jika saya menginginkannya terlebih dahulu?

— TheBlackBenzKid

Ini masih akan memuat CSS khusus sebelum file CSS inti 2 magento utama :(

— Jonathan Marzullo

Pada M2.2.1 itu adalah satu-satunya solusi yang bekerja untuk saya. Menambahkan 'order = "X"' ke simpul <css> membuat kesalahan karena atribut ini tidak diizinkan.

— Dynomite

2

Saya menjawab secara rinci di sini tentang bagaimana magento membuat css dan bagaimana pemesanan terjadi di belakang layar.

Beberapa poin tambahan yang perlu saya sebutkan di sini adalah:

Jika Anda ingin merender file css khusus setelah style-m.cssdan stlyle-l.css, maka Anda perlu mendefinisikan file css Anda seperti di bawah ini:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
Jika Anda ingin memuat file css khusus Anda sebelum style-m.cssdan stlyle-l.css, maka Anda perlu memasukkan file css Anda melalui file layout xml default_head_blocks.xmldan menambahkan file css kustom Anda di atas style-m.cssdan stlyle-l.css.

Properti CSS terbatas dan didefinisikan dengan baik dalam skema tata letak. Menurut skema tata letak, Anda dapat menggunakan properti berikut di file css Anda.

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

Ini berarti Anda tidak dapat menggunakan orderatau properti lainnya bersama dengan definisi css di file xml layout Anda. Dengan melakukannya, Anda akan mendapatkan pengecualian yang menunjukkan validasi skema gagal.

— Rajeev K Tomy
sumber

1

Anda dapat membuat aturan CSS Anda lebih atau kurang penting daripada aturan CSS inti dengan menambahkan atau menghapus pemilih induk tambahan.
Sebagai contoh, mari kita lihat contoh aturan CSS di inti:

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

Anda dapat menjadikan aturan khusus Anda lebih penting dengan menambahkan pemilih induk, misalnya:

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

atau

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

Anda dapat membuat aturan khusus Anda kurang penting dengan menghapus pemilih induk, misalnya:

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

— Mage2.PRO
sumber

3

Tentu dan saya juga bisa dengan mudah menampar !important(tapi tentu saja pendekatan Anda masih lebih baik dari itu) atau menerapkan kelas awalan vendor dengan KURANG. Namun ini menambahkan overhead dan kompleksitas yang tidak perlu. Mengapa awalan ratusan aturan atau lebih ketika perubahan urutan sederhana dari CSS akan melakukannya? Jadi saya masih mencari cara yang baik untuk menyelesaikan ini di sisi Magento ...

— Jey DWork

Selain itu ketika datang ke sumber daya lain dari posisi CSS mungkin menjadi lebih penting karena solusi bisa menjadi lebih buruk.

— Jey DWork

6

Itu bukan jawaban

— Ahmad Alfy