Magento 2'de CSS dosyalarını konumlandırmanın / sipariş etmenin doğru yolu nedir?

14

Bir CSS dosyası eklemek için mizanpaj dosyasına <head> bölümüne <css src = "<path> / <file>" media = "print | <option>" /> bloğunu ekleyin.

Ancak CSS dosyalarımızın sırasını nasıl etkileyebileceğimizi söylemiyor. Ve ana teması olan özel bir temaya CSS dosyalarını bu şekilde eklersek sonuç, dosyaların <head> bölümünün en üstüne, altında başka birçok CSS dosyası eklenmesi anlamına gelir, yani öncelikleri oldukça low (alt) ve ana temanın veya uzantıların kurallarını kolayca geçersiz kılamayız.

Magento 1'de benzer problemler vardı ve geçici çözümler vardı. Bazıları daha temiz diğerleri daha az.
Magento 2'de <head> altındaki özel bir temanın bir CSS dosyasını sipariş etmenin en iyi yolu nedir - mümkünse özel temalar için Magento 2 düzen yönergelerine uymak?

— Jey DWork
kaynak

14

Magento2'nin bunun için yerleşik bir mekanizması yok, bu yüzden ilk Magento2 uzantımı yazma fırsatı olarak değerlendirmeye karar verdim. Quickshiftin \ Assetorderer uzatma GitHub üzerinde şu anda hazır!

Uzantıyı yükledikten sonra css XML etiketlerinizde bir sipariş özelliği belirtebilirsiniz .

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

Order niteliğini, gibi düzen XML dosyalarında da kullanabilirsiniz default_head_blocks.xml. Bir sipariş belirtmediğiniz tüm css etiketleri , 1 sırası varmış gibi kabul edilir .

— quickshiftin
kaynak

Çok teşekkürler. Uzantınız benim için çalıştı. Ancak biri di.xml'de, diğeri Quickshiftin \ Assetorderer \ View \ Asset \ File sınıfında iki sorunla karşı karşıya kaldı.

— Pankaj Pareek

Merhaba @ PankajPareek, bu iyi haber ve kötü. GitHub'da ayrıntıya girme ve bir çekme talebine katkıda bulunma şansınız var mı? Uzantıyı herkes için yararlı hale getirmek güzel olurdu!

— quickshiftin

@quickshiftin Bu uzantı v2.0'da çalıştı, ancak v2.1.1'de çalışmadı. Ancak, v2.1.1'de artık gerekli olmadığını tesadüfen öğrendim çünkü order="1"dosyayı eklediğimde doğru sipariş veriliyor. Ek bir özellik eklediğiniz sürece, özelliğin ne olduğu önemli değildir. Doğrulaması için bunu değiştirebilirsiniz data-order="1"ve yine de çalışır.

— thdoan

js dosyası için sipariş çalışması da.

— Jalpesh Patel

@quickshiftin M2.2.2

— PЯINCƏ için

7

mediaÖzniteliği css öğesine ekleyebilirsiniz . Bu, kafadaki tüm CSS'nin sonuna ekleyecektir.

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

— andyace
kaynak

İlk önce istersem ne olur?

— TheBlackBenzKid

Bu, ana magento 2 çekirdekli CSS dosyalarından önce özel CSS'yi yükleyecek :(

— Jonathan Marzullo

M2.2.1 itibariyle benim için çalışan tek çözüm budur. <css> düğümüne 'order = "X"' eklendiğinde, bu özniteliğe izin verilmediği için bir hata gönderilir.

— Dynomite

2

Burada magento'nun css'i nasıl oluşturduğu ve siparişin sahne arkasında nasıl gerçekleştiği hakkında ayrıntılı olarak cevap verdim .

Burada bahsetmemiz gereken bazı ekstra noktalar:

Özel css dosyanızı sonra style-m.cssve stlyle-l.csssonra oluşturmak istiyorsanız, css dosyanızı aşağıdaki gibi tanımlamanız gerekir:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
Daha önce özel css dosyasını yüklemek istiyorsanız style-m.cssve stlyle-l.csso zaman düzeni xml dosyası aracılığıyla css dosyasını dahil gerekir default_head_blocks.xmlve üzeri özel css dosyası eklemek style-m.cssve stlyle-l.css.

CSS özellikleri sonludur ve düzen şemasında iyi tanımlanmıştır. Düzen şemasına göre, css dosyanızda aşağıdaki özellikleri kullanabilirsiniz.

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

Bu order, düzen xml dosyanızda css tanımıyla birlikte başka özellikleri kullanamayacağınız anlamına gelir . Bunu yaptığınızda, şema doğrulamasının başarısız olduğunu belirten bir istisna alırsınız.

— Rajeev K Tomy
kaynak

1

Ek üst seçici ekleyerek veya kaldırarak CSS kurallarınızı temel CSS kurallarından daha fazla veya daha az önemli hale getirebilirsiniz.
Örneğin, çekirdekte örnek bir CSS kuralı görelim:

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

Bir üst seçici ekleyerek özel kuralınızı daha önemli hale getirebilirsiniz, örneğin:

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

veya

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

Bir üst seçiciyi kaldırarak özel kuralınızı daha az önemli hale getirebilirsiniz, örneğin:

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

— Mage2.PRO
kaynak

3

Tabii ve ben de sadece smack !important(ama tabii ki yaklaşım hala bundan daha iyi) ya da LESS ile bir satıcı önek sınıfı uygulamak olabilir. Yine de bu gereksiz ek yük ve karmaşıklık katar. Basit bir CSS sipariş değişikliği bunu yaparken neden yüzlerce veya daha fazla kuralı önekle? Bu yüzden hala Magento tarafında bunu çözmek için iyi bir yol arıyorum ...

— Jey DWork

Ayrıca, CSS konumlamasından başka kaynaklar söz konusu olduğunda, geçici çözümler daha da çirkin olabileceğinden daha da önemli hale gelebilir.

— Jey DWork

6

Bu bir cevap değil

— Ahmad Alfy