Magento 2 - Mengganti CSS tanpa menggunakan! Penting di mana-mana

Saya sedang mengerjakan situs Magento 2 saat ini untuk klien. Misalkan merek klien saya adalah boofardan tema yang saya coba perpanjang / timpa adalah foobarsaya telah menetapkan sebagai tema induk menggunakanfrontend/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>

Kemudian di bawah frontend/Foobarthemes/boofar/web/css/source/_theme.lesssaya telah menulis kode CSS yang ingin saya timpa. Saya juga sudah mencoba ini _extend.less.

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

Saya terpaksa menggunakannya !important apa saja untuk bekerja di sini. Tak satu pun dari font dan teks berfungsi di kode di atas.

Apakah saya tidak memahami alur kerja Magento 2 frontend dengan benar?

Anda hanya ingin memiliki gaya Anda di _theme.lessfile jika Anda ingin mengganti tema induknya_theme.less file . Untuk file itu, hanya satu dari mereka yang dimuat, dan itu akan selalu menjadi tema yang dipilih jika file ada di sana. Dari sana, ia akan menggunakan skema fallback untuk menemukan file itu dan menggunakannya.

Jadi dalam kasus Anda, menggunakan _extend.lessfile adalah file yang tepat untuk digunakan.

Ini agak membingungkan, karena kode yang dimasukkan ke _extend.lessfile dimuat terakhir ketika Magento mengkompilasi semua gaya yang ada di situs. Jadi saya bertanya-tanya apakah ada sesuatu yang mengacaukan urutan muatan.

Melihat cara Anda mengaturnya, coba atur tema Anda di ruang nama yang berbeda dan jangan di tema yang sama. Ini mungkin tidak menyelesaikan masalah, karena cara Anda mengatur tema Anda sama dengan Magento memiliki luma / blank theme set up. Tetapi untuk semua pekerjaan yang telah saya lakukan, saya memiliki namespace vender saya yang kemudian akan diperluas dari tema pihak ke-3, atau dari luma / blank.

Hal berikutnya yang harus dicoba adalah membungkus kode Anda dalam kueri media bawaan. Saya masuk ke detail lebih lanjut di sini , tetapi pada dasarnya itu menghentikan gaya Anda dari dimuat dua kali ke dalam styles-l.cssdan styles-m.cssfile.

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

Dari sana, semuanya berujung pada kekhususan CSS. Jika ada sesuatu yang lebih tinggi dari milik Anda, Anda harus lebih spesifik dalam definisi kelas / id Anda dalam style. Anda mungkin ingin memposting gambar struktur DOM untuk menunjukkan apa yang Anda targetkan dan apa yang menunggangi apa yang ingin Anda targetkan.

Jika gaya Anda dapat diterapkan pada file _extend.less, ini berarti Anda memiliki masalah dengan spesifisitas css. Karena Magento2 menggunakan lebih sedikit kompilasi, sebagian besar gaya sangat spesifik. Untuk menimpanya, penyeleksi gaya Anda harus lebih spesifik atau setara. Saya tidak akan memposting rincian konsep itu sendiri di sini karena ada banyak artikel dapat ditemukan online.

Jika Anda menggunakan pengaturan KURANG maka pastikan SEMUA KURANG Anda ditulis di dalam kueri media M2 KURANG. Jika tidak, Anda akan berakhir dengan duplikat CSS dan mungkin masalah kekhususan.

Ini semua bermuara pada kekhususan dan memuat urutan, CSS Anda harus memuat setelah tema induk (atau modul) sehingga untuk mengesampingkan ini semua yang perlu Anda lakukan adalah memenuhi kekhususannya.

Misalnya jika menggunakan tema induk

.parent-selector .selector {
    ...
}

Maka Anda harus menulis pemilih yang sama, jika karena alasan tertentu tidak berhasil, Anda hanya perlu menambahkan pemilih lain sebelumnya. Cara mudah adalah menambahkan body sebelum itu, karena mencakup setiap pemilih dan menambahkan spesifisitas. Seperti itu:

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

Artikel ini berisi beberapa informasi bagus tentang kekhususan CSS.

Atau Anda dapat menimpa seluruh file

Jika Anda membuat banyak penyesuaian, praktik yang lebih baik adalah menimpa seluruh file daripada memperluas. Untuk melakukan ini, cukup tambahkan file ke tema Anda menggunakan jalur dan nama file yang sama.

Untuk prioritas yang lebih tinggi, Anda dapat menggandakan pemilih:

  .home.home {
    display: none;
  }

Anda harus mengganti .lessfile tema induk yang sama dengan yang ingin Anda timpa, seperti jika Anda ingin mengganti _theme.lessfile, maka Anda harus menyalin file ini ke tema anak di sini (pastikan jalur yang sama dari tema induk)

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

Anda dapat mengganti css Anda di sini.

Suntikkan file css khusus Anda Lebih Baik.

Baca selengkapnya: Cara menambahkan file CSS khusus di Magento 2

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

Ingatlah untuk mengkompilasi menggunakan grunt / less untuk memproses css: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html