Magento 2 - Bagaimana cara menambahkan file css khusus ke kepala?

8

Di Magento 1.x, saya bisa menambahkan file CSS ke kepala menggunakan helper seperti kode di bawah ini.

<reference name="head">
    <action method="addCss"><stylesheet helper="module/helperclass/helperfunction"/></action>
</reference>

Adakah yang tahu bagaimana melakukan ini di Magento 2?

magento2 layout xml

— Mike
sumber

apakah Anda menyelesaikan ini? atau apakah Anda memiliki alternatif tentang ini. beri tahu saya jika Anda menemukan beberapa

— Dev

1

maaf, saya belum punya solusi. sekarang, saya menambahkan kode ini <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> ke "after.body.start "wadah.

— Mike

Saya menemukan solusinya, silakan periksa jawaban di bawah ini.

— Mike

9

Anda tidak perlu pembantu, Anda dapat menggunakan kode di bawah ini di tata letak Anda:

<head>
    <css src="Namespace_YourModule::css/styles.css"/>
</head>

— Thao Pham
sumber

Karena saya perlu menambahkan file css dinamis.

— Mike

Bisakah Anda memberikan contoh src untuk modul kontak jika saya ingin menambahkan file style.css di halaman dengan formulir kontak? Saya mencoba <css src = "Magento_Contact :: css / styles.css" /> tetapi tidak berhasil ... Saya kehilangan aliran magento termasuk rupanya. File styles.css ada di dalam module-contact / view / css / folder ...

— Lachezar Raychev

Halo @LachezarRaychev, jika pegangan Anda di frontend, Anda perlu membuat styles.cssfile ../view/frontend/css/style.css. Dengan backend, Anda perlu membuat styles.cssfile dalam ../view/adminhtml/css/style.css.

— Thao Pham

mencobanya dan letakkan # contact-form {border: 1px solid blue! important; } tidak berfungsi ... file dalam tampilan / frontend / css / styles.css dan <css src = "Magento_Contact :: css / styles.css" /> ada di contact_index_index.xml di <head> </head> elemen .... tidak ada batas biru di sekitar bentuk ... benar-benar aneh ..

— Lachezar Raychev

Nvm ... saya harus membuat folder Magento_Contact di static / frontend / Magento / luma / sv_SE dan di dalam buatlah css / folder dan di dalamnya masukkan file styles.css ... sekarang berfungsi. Saya hanya berpikir bahwa dengan cara itu akan mengimpor bentuk file di dalam module-contact / view / frontend / css / folder ...

— Lachezar Raychev

8

Coba langkah ini.

Buat file css di bawah direktori ini. aplikasi / desain / antarmuka / Vendor / tema / web / css / customcss.css
Buat file default_head_blocks.xml jika tidak ada di jalur aplikasi ini / desain / antarmuka / Vendor / tema / Magento_Theme / tata letak / default_head_blocks.xml

Masukkan kode di bawah ini di 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>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
        <css src="css/customcss.css" />
    </head>
</page>

Semoga ini bisa membantu Anda !!

— Makwana Ketan
sumber

Apakah saya perlu menjalankan perintah kasar setelah melakukan ini?

— TheBlackBenzKid

1

nama file css dinamis. sekarang, saya menambahkan kode ini <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> ke "after.body.start "container, bagaimana saya bisa menambahkan kode ini ke <head>?

— Mike

6

Saya menemukan solusinya sendiri.

Dalam file Layout xml.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="block_name" template="custom_head.phtml" />
        </referenceContainer>
    </body>
</page>

Dalam file custom_head.phtml

<link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>">

— Mike
sumber

1

Buat model khusus

tambahkan file xml Namespace / YourModule / view / frontend / layout / default_head_blocks.xml

file ini akan mengubah tata letak kepala menggunakan konfigurasi halaman baca lebih lanjut di http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

contoh konten file

<?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="Namespace_YourModule::css/custom.css" />
    </head>
</page>

kemudian tambahkan file css di jalur ini Namespace / YourModule / view / frontend / web / css / custom.css

— Mohamed Abo Badawy
sumber

Terima kasih atas jawabannya. Ini berhasil untuk saya. Sekarang css diterapkan di semua halaman menggunakan file ini.

— Vinay Sikarwar

Dapatkah Anda membantu saya, bagaimana saya sekarang dapat menerapkannya hanya di halaman produk

— Vinay Sikarwar

Tidak yakin tentang ini, tetapi bagaimana dengan .catalog-product-view body class yang digunakan magento pada halaman produk Anda bisa mewarisi properti CSS darinya!

— Mohamed Abo Badawy