Mengganti Gaya Tema Kosong di Magento 2

Bagaimana cara Anda mengesampingkan gaya navigasi untuk tema khusus saat mewarisi dari tema kosong di Magento 2?

Saya memiliki theme.cssfile di app/design/frontend/<Vendor>/<theme>/web/cssfolder saya , tetapi saya sadar bahwa Magento 2 menggunakan KURANG. Saya dapat dengan mudah mengganti style dalam theme.cssstylesheet saya , tetapi saya tidak ingin terus menggunakannya !important.

Juga, saya menggunakan Bootstrap 3, dan saya berasumsi bahwa gaya dari tema kosong akan menggantikan semua instruksi gaya yang cocok dengan Bootstrap. Apa cara terbaik untuk mendekati ini?

— Gareth Daine
sumber

Jawaban:

2 cara yang direkomendasikan oleh Magento untuk mengganti atau memperluas gaya dari tema induk:

1. Cara sederhana

Memperpanjang:

Di direktori tema Anda, buat web/css/sourcesub-direktori. (Anda sudah melakukan bagian ini) Buat _extend.lessfile di sana.

Menurut dokumentasi :

"Memperluas tema menggunakan _extend.less adalah opsi paling sederhana ketika Anda puas dengan semua yang dimiliki tema induknya, tetapi ingin menambahkan lebih banyak gaya."

Mengesampingkan:

Alih-alih membuat _extend.lessfile, Anda membuat _theme.lessfile. Dalam hal ini Anda perlu menyalin semua variabel yang Anda butuhkan dari induknya _theme.less, termasuk yang tidak akan diubah. Kemudian buat perubahan Anda.

Menurut dokumentasi , kekurangannya adalah:

"Anda perlu memantau dan memperbarui file Anda secara manual setiap kali _theme.less orang tua diperbarui."

2. Cara terstruktur

Memperpanjang:

Metode ini memungkinkan Anda mengatur kode Anda dengan cara yang lebih baik. Perubahan Anda akan terstruktur. Alih-alih menggunakan satu _extend.less file untuk memasukkan semua perubahan Anda, Anda membuat file extended untuk setiap komponen dari perpustakaan UI Magento yang ingin Anda ubah.

Katakanlah Anda ingin memperluas gaya dari komponen tombol dan navigasi. Di direktori tema Anda buat 2 file: _buttons_extend.lessdan _navigation_extend.less, kemudian tambahkan perubahan Anda untuk setiap komponen dalam file yang sesuai.

Kemudian Anda membuat _extend.lessfile dengan menambahkan kode ini:

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

Mengesampingkan:

Dalam tema Anda, membuat copy dari file yang sesuai dengan komponen UI yang ingin perubahan ( _buttons.less, _navigation.less, dll) File ini akan menimpa _buttons.lesstema induk.

Penting untuk memperhatikan perbedaan antara menimpa dan memperluas .

Anda dapat membaca lebih lanjut tentang mengganti dan memperluas dalam dokumentasi ini atau tentang CSS di Magento 2 di Panduan Pengembang Frontend .

— Luis Garcia
sumber

Jadi katakanlah saya memiliki Folder Vendor_Namespace, saya menambahkan ada folder lain bernama "web / css / source / _extend.less" dan file _extend.less-di web / css / source / akan tahu di mana letak file yang sesuai? Apakah saya memahaminya dengan benar

— Max

Ya, buat saja file web/css/source/_extend.lessdan letakkan gaya Anda di sana.

— Luis Garcia

Saya telah membuat file _extend.less dengan mengimpor _slider.less: <theme_folder> / css / source / kedua file berada di jalur yang sama, tetapi tidak berfungsi, semua aturan di _slider.less tidak ditemukan dalam file .css yang dihasilkan, Saya dalam mode pengembang dan menjalankan "setup php magento: static-content: deploy"

— xzegga

Sudahkah Anda menghapus cache browser Anda?

— Luis Garcia

Bisakah saya menimpa variabel <theme_folder> / css / source / lib /? bagaimana saya dapat mengubah variabel file yang kurang? (katakanlah saya ingin menimpa @ tombol-latar belakang misalnya) - saya perlu menulisnya di dalam _buttons_extend.less atau saya dapat menimpa semua lin / web / css / source / lib / variabel

— Goldy

Saya punya masalah serupa menggunakan Foundation. Cara resmi untuk melakukan ini adalah mengganti file modul yang lebih sedikit dan memodifikasi css di sana. Ini kemudian akan diambil oleh Magento selama kompilasi

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

Akhirnya saya akhirnya menghapus semua file CSS default yang dibuat oleh Magento. Saya merasa jauh lebih mudah untuk menulis CSS khusus, terutama menggunakan kerangka kerja seperti Bootstrap, daripada mencoba menimpa semua modul yang berbeda. Anda dapat melakukannya di:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— Mike Stumpf
sumber

Cara yang baik untuk melakukan hal-hal. Tetapi pertanyaannya adalah tentang "memperluas" tema penuh dan menambahkan lebih banyak ke dalamnya.

— Miguel Felipe Guillen Calo

Tidak, pertanyaannya adalah tentang mengganti.

— Hitam

Katakanlah Anda ingin menimpa styles-m.css , lalu masukkan salinan web/csstema Anda, beri nama custom-styles-m.css .

Kemudian gunakan kode ini dalam tema Anda 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>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— Hitam
sumber