_Module.less ve _extend.less arasındaki fark

Kullanarak bir tema uzanan arasında herhangi bir fark var mı _module.lessve _extend.less? Bir modül / tema genişletilirken en iyi uygulama nedir?

İlk düşüncem, _module.lessyeni bir modül tasarlarken ve _extend.lessbir modülü genişletirken kullanmak daha iyiydi . Fakat Luma _module.less, boş temayı genişletirken kullanır , böylece teori pencereden çıkmış olur.

Aralarında görebildiğim tek fark _module.less, yanıt veren kitaplıktan önce ve onlardan alındığı _theme.lessyerde _extend.lessiçe aktarılıyor.

Bu, içe aktarılma sırasıdır vendor/magento/theme-frontend-blank/web/css/styles-l.less

//
//  Blank theme desktop styles
//  _____________________________________________

//  These desktop styles are added to mobile

//
//  Global lib + theme styles
//  ---------------------------------------------

@import '_styles.less';
@import (reference) 'source/_extends.less';

//
//  Magento Import instructions
//  ---------------------------------------------

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

//
//  Media queries collector
//  ---------------------------------------------

@import 'source/lib/_responsive.less';

@media-target: 'desktop'; // Sets target device for this file
@media-common: false; // Sets not to output common styles

//
//  Global variables override
//  ---------------------------------------------

@import 'source/_theme.less';

//
//  Extend for minor customisation
//  ---------------------------------------------

//@magento_import 'source/_extend.less';

— Ben Crook
kaynak

Yanıtlar:

Cevap Magento belgelerinde biraz gizli:

Bir temayı _extend.less kullanarak genişletmek , ana temanın sahip olduğu her şeyden memnun olduğunuzda ancak daha fazla stil eklemek istediğinizde en basit seçenektir.

Burada daha fazla oku

Bir modül için stillerde büyük değişiklikler yapmak istediğinizde _module.less öğesini kullanın ve küçük ayarlamalar için _extend.less öğesini kullanın . Yukarıdaki linkte, bileşen stillerini nasıl geçersiz kılacağınıza dair daha fazla örnek bulacaksınız.

— c.norin
kaynak

Bunu okudum ama nedenini açıklamıyor, arkasında sebep yok gibi görünüyor. Bir fark olup olmadığını anlamaya çalışıyorum. Bir şey kullanmayı tutarlılığı tercih ettiğim için 'Magento öyle dedi' çünkü tüm değişikliklerim için _extend.less kullanıyorum.

— Ben Crook

@BenCrook Eğer bu son birkaç gündeki okumam bana doğru geliyorsa, hayır. Birisi .less, ana temasında / modülündeki bir dosyayla aynı şekilde temasına herhangi bir dosya eklerse, bu geçersiz kılınır. Temanıza boş bir _module.less oluşturarak ve orijinal stillerin geçerli olup olmadığını kontrol ederek muhtemelen doğrulayabilirsiniz.

— Darren Felton

A'dan sonra php bin/magento setup:static-content:deploybakabilirsiniz pub/static/frontend/<vendor>/<themeName>/<locale>/css/ve pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/* .less dosyaları için temanıza veya geldiği modül / ebeveyn temasına sembolik bağlantılar olacaktır.

— Darren Felton

Bu doğru _module.less, daha az ana dosyayı geçersiz kılar, kalıtım ya da birleşme olmaz. Orjinal

— cevabımda

@MattCosentino Bu cevabın çok geç geldiğini biliyorum, fakat birisinin üzerine tökezlemesi durumunda bunu burada bırakacağım: Lütfen _extends.less ve _extend.less arasındaki farkı not edin. _Extend.less dosyaları, bir ana temanın stillerini genişletmek için herhangi bir modül bağlamına eklenebilir. _Extends.less, temanın kök dizininde bulunur ve mevcut yardımcı programları genişletmek için kullanılır (<project> /lib/web/css/docs/source/_utilities.less adresine bakın).

— c.norin

Basit açıklama veya ikisi arasındaki fark:

_extend.lessÖrneğin size ana teması ile konum mutlu için üst temaları stilleri değiştirme / uzatmak yoludur Luma ve sadece özel tema düğme stillerini değiştirmek istiyorum, yapmanız gereken tek şey yeni bir dosya oluşturmak olduğunu _buttons_extend.lessaltında web/css/sourceözel tema ve orada stilleri ayarlamak. Bu dosyayı _extend.lesstema dizininizdeki dosyaya ekleyerek kaydedin.

Bir modülün stillerini uzatmak istiyorsanız, örneğin ödeme modülü, _extend.lesstemalar modül klasörünüzün içinde bir dosya oluşturabilir, örneğin Magento_Checkout/web/css/source/_extend.lessoraya modül stilini ekleyebilir / genişletebilirsiniz.

Şimdi eğer _module.lessmodül dizinimin içine dosya Magento_Checkout/web/css/source/_module.lesseklersem, bu modül için üst temaları geçersiz kılmayı düşünüyorum, bu durumda ' _module.less' benim ana tememin modül dizininden ' ' dosyasını kopyalamalı ve bu dosya üzerinde değişiklik yapmam gerekiyor. _module.lesstamamen üst temalar dosyasını değiştir .

— Devtype
kaynak

Asla bir ebeveyn olarak Luma hakkında konuşmuyor.

— Ezequiel Alba

_extends.lessBoş Tema içinde sonunda S ile, onlar aracılığıyla uzatılabilir tüm sınıfları oluşturulmuş bir dosyadır LESStarzı değişiklikleri için yeni bileşenler veya modüler yapısı oluşturma gerek kalmadan teması içinde daha sonra. -> Bana inanmayanlar için: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less kontrol edin dosya.

_extend.lessSonunda S olmaksızın, üst tema vardır ve sadece, bir kaç şey değiştirmek bazı stilini değiştirmek için gerekenler ile% 99 mutlu olduğunda içindir ve bu kadar.

Sonuncusu hakkında, benim görüşüme göre, kendi gelişmeniz için kullanmayın. Daha sonra büyük bir karışıklık yaratır. _module.lessÖzelleştirmek istediğiniz her modül için yapınızı modüler tutun ve sonunda daha iyi bir sonuç ve sürdürülebilir bir proje elde edin.

— Ezequiel Alba
kaynak