Magento 2 - CSS kullanmadan geçersiz kılma! Her yerde önemli

Şu anda bir müşteri için bir Magento 2 sitesinde çalışıyorum. Müşterimin markasının olduğunu boofarve genişletmeye / geçersiz kılmaya çalıştığım foobartemayı kullanarak ana tema olarak ayarladığımı varsayalımfrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Sonra altında frontend/Foobarthemes/boofar/web/css/source/_theme.lessgeçersiz kılmak istediğim CSS kodunu yazdım. Bunu da denedim _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

!importantBurada çalışmak için her şeyi kullanmak zorunda kaldım . Yazı tipi ve metin öğelerinin hiçbiri yukarıdaki kodda çalışmaz.

Magento 2 ön uç iş akışını doğru anlamadım mı?

Stillerinizin yalnızca _theme.lessüst temanın _theme.lessdosyasını geçersiz kılmak istiyorsanız dosyada olmasını istersiniz . Bu dosya için bunlardan yalnızca biri yüklenir ve dosya orada varsa her zaman seçilen tema olur. Oradan, dosyayı bulmak ve kullanmak için geri dönüş şemasını kullanacaktır.

Yani sizin durumunuzda, _extend.lessdosyayı kullanmak doğru dosyadır.

_extend.lessMagento, sitede bulunan tüm stilleri derlediğinde , dosyaya konulan kod en son yüklendiğinden , bu biraz kafa karıştırıcıdır . Bu yüzden yük emri ile uğraşmak bir şey olup olmadığını merak ediyorum.

Kurma şeklinize baktığınızda, temanızı aynı temada değil, farklı bir ad alanında kurmayı deneyin. Temanızı ayarlama şekliniz Magento'nun luma / blank teması ayarlandığında olduğu gibi bu sorunu çözmeyebilir. Ama yaptığım tüm işler için, o zaman 3. taraf temasından ya da luma / blank'tan uzatılacak olan vender ad alanım var.

Denenecek bir sonraki şey, kodunuzu yerleşik medya sorgularına sarmak olacaktır. Burada daha fazla ayrıntıya giriyorum , ancak temelde stillerinizin styles-l.cssve styles-m.cssdosyalarına iki kez yüklenmesini engelliyor .

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

Oradan, hepsi CSS özgüllüğüne iniyor. Sizinkinden daha yüksek başka bir şey varsa, stillerde sınıf / kimlik tanımınızda daha spesifik olmanız gerekir. Neyi hedeflediğinizi ve neyi hedeflemek istediğinizi göstermek için DOM yapısının bir resmini yayınlamak isteyebilirsiniz.

Stillerinizin _extend.less dosyasına uygulanmasını sağlayabiliyorsanız, bu css özgüllüğü ile ilgili sorunlarınız olduğu anlamına gelir. Magento2 daha az derleme kullandığından, çoğu stil çok spesifiktir. Bunları geçersiz kılmak için stil seçicilerinizin daha fazla veya eşit derecede spesifik olması gerekir. Burada bulabileceğiniz pek çok makale olduğu için konseptin detaylarını burada paylaşmayacağım.

Varsayılan LESS kurulumunu kullanıyorsanız, ALL LESS'inizin M2 LESS ortam sorgularının içine yazıldığından emin olun . Bunu yapmazsanız, yinelenen CSS ve muhtemelen özgüllük sorunlarınız olur.

Bu, tüm özgüllük ve yük düzene aşağı gelir, CSS gerekir böylece yapmanız gereken bu tüm özgünlüğünü karşılamak olduğunu hükümsüz ana temaları (veya modüllerin) sonra yükleme olacak.

Örneğin, üst tema şunu kullanıyorsa

.parent-selector .selector {
    ...
}

O zaman aynı seçiciyi yazmanız gerekir, eğer herhangi bir nedenle işe yaramazsa, önce başka bir seçici eklemeniz gerekir. Kolay bir yol, her seçiciyi kapsadığı ve özgüllük kattığı için vücudu önüne eklemektir. Şöyle ki:

body .parent-selector .selector {
    ...
}

Bu makale CSS özgüllüğü hakkında bazı iyi bilgiler içermektedir.

Alternatif olarak tüm dosyanın üzerine yazabilirsiniz

Çok fazla özelleştirme yapıyorsanız, uzatmak yerine tüm dosyanın üzerine yazmak daha iyi bir uygulamadır. Bunu yapmak için dosyayı aynı dosya yolunu ve adını kullanarak temanıza eklemeniz yeterlidir.

Daha yüksek öncelik için seçiciyi çoğaltabilirsiniz:

  .home.home {
    display: none;
  }

Geçersiz kılmak .lessistediğiniz üst tema ile aynı dosyayı geçersiz kılmanız gerekir, örneğin _theme.lessdosyayı geçersiz kılmak istiyorsanız, bu dosyayı buradaki alt temaya kopyalamanız gerekir (ana temanın aynı yolundan emin olun)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

burada css'nizi geçersiz kılabilirsiniz.

Özel css dosyalarınızı enjekte etmek daha iyidir.

Daha fazla bilgi için: Magento 2'de özel bir CSS dosyası nasıl eklenir

Ve Mage Docs: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

Css'i işlemek için grunt / less kullanarak derlemeyi unutmayın: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html