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

10

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?

magento2 theme css frontend less-css Francis Kim
sumber
Di mana aturan css asli ditemukan?
Aaron Allen
magento.stackexchange.com/questions/102994/… devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/… magento.stackexchange.com/questions/112655/… magento.stackexchange.com/questions / 108684 / ...
Ankit Shah
1
Coba perbarui ini di web / css / custom.css (css sederhana) dan jangan lupa untuk menghapus var / folder dan pub / static / content / frontend / yourtheme_package / yourtheme / en_US / hapus folder css & jalankan php bin / setup magento: statis -cotent: menyebarkan perintah.
Nits
Anda memiliki di theme.xml "foobar1" untuk tema induk bukan "foobar"
St3phan

Jawaban:

8

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.

circleix
sumber
Poin bagus - mungkin tema yang saya gunakan (pihak ke-3) sedang melakukan sesuatu yang aneh tetapi dengan apa yang Anda katakan jika saya melakukan override yang sama untuk tema default, saya tidak harus menggunakan! penting. Apakah ini patut dicoba?
Francis Kim
1
Saya kira begitu, Anda hanya dapat membuat tema cepat hanya dengan registration.php, theme.xmldan folder web. Kompilasi ulang lalu pilih di admin dan lihat apa yang terjadi. Saya pikir sesuatu yang lain sedang terjadi, tetapi ini muncul di kepala saya sebagai kemungkinan.
circleix
1
Juga, sama seperti cek kewarasan, Anda bisa memasukkan nilai yang unik dalam gaya Anda (saya suka menggunakan background-color: tomatokarena tidak ada yang akan menggunakan warna itu) dan memeriksa untuk melihat dalam gaya yang dikompilasi di mana dalam lembar itu berakhir. lihat pub/static/frontend/{package}/{theme}/en_us/csskedua file gaya. jika ini bukan di akhir file, ada sesuatu yang kacau dengan urutan pemuatan default.
circleix
4

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.

Timik
sumber
3

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.

Ben Crook
sumber
0

Untuk prioritas yang lebih tinggi, Anda dapat menggandakan pemilih: 

  .home.home {
    display: none;
  }
Victor Sl
sumber
Tip yang bagus! Tapi sayangnya bukan itu yang saya kejar.
Francis Kim
0

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.

Dipesh Rangani
sumber