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

Jawaban:

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.

  1. Buat file css di bawah direktori ini. aplikasi / desain / antarmuka / Vendor / tema / web / css / customcss.css
  2. 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