Cara terbaik untuk memperluas modul yang kurang ditemukan di web / css / source / module, seperti _minicart.less?

14

Lalu, bagaimana cara terbaik untuk menambah lebih sedikit konten file <module>/web/css/source/module/, seperti misalnya Magento_Checkout/web/css/source/module/_minicart.less?

Dengan asumsi itu

A) OVERRIDE

  1. kurang terkait tema Anda harus membuat (atau menyalin) lebih sedikit dengan nama yang sama dengan tema induk dan meletakkannya di tema Anda seperti ini theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. modul kurang spesifik Anda harus membuat (atau menyalin) lebih sedikit dengan nama yang sama dengan tema induk dan meletakkannya di tema Anda seperti ini theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. Lib UI kurang Anda harus membuat (atau menyalin) kurang dengan konten nama yang sama di folder perpustakaan dan meletakkannya di tema Anda seperti ini magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

dan untuk

B) PERLU

  1. kurang terkait tema Anda harus membuat file _extend.less dalam tema Anda menambahkan _extend dalam nama seperti ini <your-theme>/web/css/source/_navigation_extend.lessuntuk memperpanjang theme-frontend-blank/web/css/source/_navigation.lessDAN mendaftarkan file dengan @import directive dalam _extend.less dari konten tema di web / css / sumber ->@import "_navigation_extend.less"
  2. modul spesifik kurang Anda harus membuat file _extend.less di jalur modul tema Anda seperti ini <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessyang memperpanjang Magento_CatalogSearch asli _module.less
  3. Lib UI kurang Anda harus membuat lebih sedikit dengan konten nama yang sama di folder perpustakaan menambahkan _tambah dalam nama seperti ini <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.lessuntuk memperpanjang magento2-base/lib/web/css/source/lib/_buttons.lessDAN mendaftarkan file itu dengan @import directive di _extend.less dari konten tema di web / css / sumber - >@import "lib/_buttons_extend.less"

Teori harus menyarankan Anda membuat _minicart_extend.less tetapi tidak bekerja secara otomatis. Mungkin Anda harus mengimpor file itu di _extend.less dari modul itu seperti dijelaskan di B1 atau B3?

Dan mengapa komponen ini memperluas kurang tidak secara otomatis termasuk dalam parsing css jika ini adalah cara yang benar untuk memperpanjang mereka tetapi harus diimpor di _extend.less?

(Ini juga pertanyaan lain: apa perbedaan antara web/css/source/lib/_buttons.lessdan web/css/source/_buttons.less? 😕)

Saya sedikit bingung. Semoga ada yang bisa membantu saya.

Maaf untuk teks yang panjang ini.


Sumber:

Loreena
sumber

Jawaban:

12

Menurut konvensi Magento 2, cara terbaik untuk memperluas gaya modul adalah sebagai berikut:

Jika kita ingin memperluas gaya, Magento_Checkout/web/css/source/module/_minicart.lesskita perlu memiliki 2 file

  • <your-theme>/Magento_Checkout/web/css/source/_extend.lesstempat kami akan mengimpor ekstensi khusus kami. Pada kasus ini@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less yang akan berisi gaya khusus kami.

Alasan mengapa kita membutuhkan _extend.lessfile untuk menentukan@imports adalah karena Magento hanya menyertakan secara otomatis _extend.lessper modul. Memeriksa dan menambahkan semua *_extend.lesssecara otomatis akan memakan waktu dan karena itu tidak diterapkan seperti itu.

Di Magento, file tema Kosong yang bertanggung jawab atas minicart berada di /vendor/magento/theme-frontend-blank/Magento_Checkout/

Kami juga dapat menambahkan semua gaya khusus kami langsung ke _extend.less. Namun, membaginya menjadi file yang lebih kecil dan spesifik seperti dalam modul asli menjaga kode tetap jelas dan lebih terorganisir. Itu juga cara yang disarankan sesuai dengan standar Magento 2.

Jalogut
sumber
@Jalogut terima kasih! Jadi, saya juga bisa memanggil "_minicart_extend.less" sebagai "foobar.less" dan itu tidak ada bedanya karena Anda @import dalam _extend.less yang penting. Menambahkan "_extendd.less" ke nama komponen itu hanya sebuah konvensi untuk membantu Anda menjaga semuanya lebih jelas?
Loreena
Tepat, itulah idenya.
Jalogut
@Jalogut Anda yakin tentang mereka yang mengatakan ini "Memeriksa dan menambahkan semua * _extend.less otomatis akan memakan waktu" atau itu dugaan Anda? karena IMO yakin butuh sedikit lebih banyak, tetapi tidak sebanyak itu, untuk membuat pengembang melakukan ini setiap kali mereka ingin menyesuaikan (ditambah sedikit kebingungan pada awalnya)
medmek