Perbedaan antara _module.less dan _extend.less

Apakah ada perbedaan antara memperluas tema menggunakan _module.lessdan _extend.less? Dan apa praktik terbaik saat memperluas modul / tema?

Pikiran pertama saya adalah lebih baik digunakan _module.lesssaat menata modul baru, dan _extend.lesssaat memperpanjang modul. Tetapi Luma menggunakan _module.lessketika memperluas tema kosong sehingga teori telah keluar jendela.

Satu-satunya perbedaan yang dapat saya lihat di antara mereka _module.lessadalah diimpor sebelum perpustakaan responsif dan di _theme.lessmana seperti _extend.lessyang diimpor setelah mereka.

Ini adalah pesanan tempat mereka diimpor 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';

magento2 frontend view less-css less Ben Crook
sumber

Jawaban:

Jawabannya agak tersembunyi di dokumen Magento:

Memperluas tema menggunakan _extend.less adalah pilihan yang paling sederhana ketika Anda senang dengan segala sesuatu tema induk memiliki, tapi ingin menambahkan lebih gaya.

Baca lebih lanjut di sini

Gunakan _module.less saat Anda ingin membuat perubahan besar dalam gaya untuk modul dan gunakan _extend.less untuk penyesuaian kecil. Anda akan menemukan lebih banyak contoh tentang cara mengganti gaya komponen di tautan di atas.

c.norin
sumber

Saya sudah membaca itu tetapi tidak benar-benar menjelaskan mengapa, sepertinya tidak ada alasan di baliknya. Saya mencoba mencari tahu apakah ada perbedaan. Saya telah menggunakan _extend.less untuk semua perubahan saya karena saya lebih suka konsistensi daripada menggunakan sesuatu karena 'Magento bilang begitu'.

Ben Crook

@ BenCrook jika bacaan saya beberapa hari terakhir ini membantu saya dengan benar, tidak. Jika seseorang menambahkan .lessfile apa pun dalam tema mereka dengan jalur yang sama dengan file dalam tema induk / modul, itu adalah override. Anda mungkin dapat memverifikasi dengan membuat _module.less kosong ke dalam tema Anda, dan melihat apakah gaya asli berlaku.

Darren Felton

Setelah a php bin/magento setup:static-content:deploy, Anda dapat melihat pub/static/frontend/<vendor>/<themeName>/<locale>/css/dan pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/dan akan ada tautan simbolis untuk file * .less ke tema Anda, atau tema modul / induk tempat asalnya.

Darren Felton

Itu benar _module.less menimpa file induk kurang, tidak ada warisan atau penggabungan. Saya menyadari bahwa saya dapat membuatnya lebih jelas dalam jawaban asli saya :)

c.norin

@MattCosentino Saya menyadari balasan ini datang sangat terlambat, tapi saya akan meninggalkan ini di sini kalau-kalau ada orang yang menemukannya: Mohon perhatikan perbedaan antara _extends.less dan _extend.less. File _extend.less dapat ditambahkan ke konteks modul apa pun, untuk memperluas gaya dari tema induk. _Extends.less terletak di akar tema dan digunakan untuk memperluas utilitas yang ada (lihat <project> /lib/web/css/docs/source/_utilities.less).

c.norin

Penjelasan atau perbedaan sederhana antara keduanya:

_extend.lessadalah cara untuk memperluas / memodifikasi gaya tema induk misalnya Anda senang dengan Luma tema induk Anda dan hanya ingin mengubah gaya tombol dalam tema khusus Anda, yang perlu Anda lakukan adalah membuat file baru di _buttons_extend.lessbawah web/css/sourcedalam tema khusus Anda dan sesuaikan gaya di sana. Daftarkan file ini dengan menambahkannya ke _extend.lessfile di dalam direktori tema Anda.

Bagaimana jika Anda ingin memperluas gaya modul misalnya modul checkout, yah Anda dapat membuat _extend.lessfile di dalam folder modul tema Anda misalnya Magento_Checkout/web/css/source/_extend.lessdan menambah / memperluas gaya modul di sana.

Sekarang jika saya menambahkan _module.lessfile di dalam direktori modul Magento_Checkout/web/css/source/_module.lesssaya, saya bermaksud untuk menimpa styling tema orang tua saya untuk modul ini dalam hal mana saya perlu menyalin _module.lessfile ' ' dari direktori modul tema orang tua saya dan membuat modifikasi pada file itu dalam hal ini file ini akan ganti _module.lessfile tema induk sama sekali.

Jenis layanan
sumber

Dia tidak pernah berbicara tentang Luma sebagai orang tua.

Ezequiel Alba

The _extends.lessdengan S di bagian akhir di dalam Blank Theme, adalah file di mana mereka membuat semua kelas yang dapat diperpanjang LESSnanti di dalam theme, tanpa perlu membuat komponen baru atau struktur modular untuk perubahan gaya. -> Bagi mereka yang tidak percaya kepada saya: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less periksa mengajukan.

Yang _extend.lesstanpa S pada akhirnya, adalah ketika Anda 99% senang dengan apa yang dimiliki tema induk dan Anda hanya perlu mengubah beberapa hal, mengubah beberapa gaya dan hanya itu.

Tentang yang terakhir, pendapat pribadi saya, jangan menggunakannya untuk pengembangan Anda sendiri. Itu menciptakan kekacauan besar nanti. Jaga agar struktur Anda tetap modular _module.lessuntuk setiap modul yang ingin Anda sesuaikan dan Anda akan mendapatkan hasil yang lebih baik & proyek yang dapat dikelola pada akhirnya.

Ezequiel Alba
sumber