Catatan 1: Ini akan selalu menganggap Anda memperpanjang magento-blank.
Catatan 2: <theme-dir>adalahapp/design/frontend/Vendor/theme/
Dasar-dasar: Mengubah Variabel Dasar
(untuk tl; dr, lompat ke kesimpulan)
Sebagian besar panduan yang saya temukan hanya membahas langkah ini dalam tema dengan KURANG, jadi saya akan mencoba untuk membuat singkat. Magento 2 memiliki set variabel dasar yang mendefinisikan aspek tema yang umum digunakan. Warna, font, gaya judul halaman, dan sebagainya didefinisikan dalam variabel-variabel ini.
Di dalam <magento-root>/lib/web/css/source/lib/variables/Anda akan menemukan sejumlah file KURANG bernama intuitif. Di masing-masing ini, Anda dapat menemukan nilai yang ditetapkan ke variabel untuk banyak elemen umum di Magento 2.
Untuk mengubah variabel-variabel ini, cukup buat file di <theme-dir>/web/css/source/_theme.less.
Contoh:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
Secara teknis, Anda dapat memasukkan CSS atau KURANG di sini, dan itu akan berhasil diterapkan ke situs Anda (tetapi jangan lakukan ini). Saya akan menjelaskan bagaimana ini bekerja sebentar lagi.
Menambahkan file CSS baru
Anda dapat menambahkan CSS baru ke kepala semua halaman template Anda.
Buat <theme-dir>/Magento_Theme/layout/default_head_blocks.xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/myStyle.css" />
</head>
</page>
Dan kemudian Anda membuat file dengan CSS atau KURANG baru Anda:
<theme-dir>/web/css/myStyle.less. Anda dapat menulis KURANG atau CSS di sini.
Mengganti Gaya yang Ada
Saya menemukan bahwa Magento 2 KURANG tidak mudah digantikan dengan hanya menambahkan file CSS baru. Dan di sinilah saya mulai tersesat, dan saya akan menjelaskan bagaimana Magento 2 menemukan file-file KURANG.
Secara default, Magento 2 akan menyertakan (dan akhirnya kembali ke) file-file ini:
<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles
File-file ini termasuk (impor) file KURANG lainnya, yang sering menyertakan lebih banyak file KURANG. Dan di sinilah pemandu lain menjadi tidak membantu bagi saya dan saya akan menjelaskan apa yang saya temukan, sebaik mungkin.
Sumber / lib Magic
Dalam styles-m.less, ada garis: @import 'source/lib/_responsive.less';. Anda akan melihat bahwa tidak ada source/libdirektori dalam magento-blanktema. Jelas bahwa gaya Magento 2 akhirnya jatuh kembali ke <magento-root>/lib/web/css/. Itu ada di sana Anda temukan source/lib/_responsive.less.
Variabel yang Anda gunakan _theme.lesstersedia karena source/libfile yang diimpor dalam magento-blanktema. Catatan: _theme.less adalah file kosong dalam tema default. Lanjutkan membaca untuk mengetahui mengapa ini penting untuk dicatat.
"KURANG disertakan secara otomatis" file
Beberapa panduan yang saya temukan bersikeras bahwa Anda dapat membuat <theme-dir>/web/css/_styles.lesskarena Magento secara otomatis mencari, dan termasuk, file itu. Saya menemukan ini saran yang buruk.
Jika Anda membuat <theme-dir>/web/css/_styles.less, situs Anda akan rusak. theme-frontend-blank/web/css/styles-m.lessimpor _styles.less, yang pada gilirannya mengimpor 3 file .less lebih, yang masing-masing mengimpor lebih banyak file .less.
Jika Anda membuat _styles.less, Anda menimpanya. Dengan meng-override _styles.less, Anda meng-override semua file yang diimpornya, dan semua file yang diimpor file itu, dan seterusnya.
Catatan tentang _theme.less: File ini kosong di tema default, dan karena itu aman untuk hanya membuat dan mulai menambahkan jika Anda mendasarkan tema Anda pada default. Namun, jika Anda memperluas tema yang sudah memperluas default, kemungkinan_theme.lesssudah digunakan. Membuat itu lagi akan menimpanya.
@ Magento_import ajaib
Di dalam styles-m.lessAnda akan melihat beberapa baris komentar:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
Baris-baris ini sebenarnya tidak dikomentari! Magento 2 memiliki penanganan khusus untuk saluran yang dimulai dengan //@magento_import. Baris-baris ini hanya dapat dimasukkan dalam file di <theme-dir>/web/css.
Baris di atas menginstruksikan Magento 2 untuk memasukkan file apa pun dalam tema yang mengikuti pola yang diberikan. Jadi baris di atas akan secara otomatis mencakup:
'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';
'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';
'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on
Menambahkan nama file _widgets.lessdan _module.less akan secara otomatis ditemukan dan disertakan, bahkan jika itu adalah modul baru atau modul yang belum memiliki file itu.
Ketahuilah bahwa Magento-Blank menyertakan file-file itu untuk sebagian besar Modul, dan jika Anda ingin menggunakan metode ini, Anda perlu menyalin-menempelkan dokumen asli (kecuali jika Anda melakukan penulisan ulang yang lengkap).
Kesimpulan
(Baca: jangan gunakan _styles.less).
Saat Anda ingin mengubah CSS suatu elemen, Anda ingin melakukan yang terbaik untuk menemukan file apa gaya didefinisikan. Kadang-kadang semua yang perlu Anda lakukan adalah mengubah variabel _theme.less. Sering kali, saya curiga, Anda hanya perlu menyalin-menempelkan _module.lessatau _widgets.lesske tema Anda dan melakukan perubahan.
Jika Anda telah membuat modul baru, atau memiliki elemen HTML baru, Anda mungkin perlu membuat file KURANG dan memasukkannya secara terpisah ke dalam <head>setiap halaman.
Dalam kasus yang rumit, Anda mungkin perlu membuat yang baru @importatau @magento_import. Anda ingin menemukan anak terendah yang masuk akal untuk apa yang Anda lakukan, jadi Anda tidak menyalin-menempelkan banyak file yang tidak perlu atau menambahkan @importgaris membingungkan yang tampaknya tidak mengarah ke mana pun.