Magento 2 - Come aggiungere file css personalizzati nella testa?

8

In Magento 1.x, posso aggiungere i file CSS nella testa usando l'helper come sotto il codice.

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

Qualcuno sa come farlo in Magento 2?

magento2 layout xml

— Mike
fonte

hai capito? o hai qualche supplente su questo. fatemi sapere se ne scoprite alcuni

— Dev

1

scusa, non ho ancora una soluzione. ora, ho aggiunto questo codice <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> in "after.body.start "contenitore.

— Mike,

Ho trovato la soluzione, controlla sotto la risposta.

— Mike,

9

Non hai bisogno di aiuto, puoi usare questo codice qui sotto nel tuo layout:

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

— Thao Pham
fonte

Perché ho bisogno di aggiungere un file CSS dinamico.

— Mike,

Potete fornire l'esempio src per il modulo di contatto se voglio aggiungere il file style.css nella pagina con il modulo di contatto? Ho provato <css src = "Magento_Contact :: css / styles.css" /> ma non ha funzionato ... Mi sembra che manchi il flusso di magento. Il file styles.css si trova nella cartella module-contact / view / css / ...

— Lachezar Raychev

Ciao @LachezarRaychev, se il tuo handle in frontend, devi creare il styles.cssfile ../view/frontend/css/style.css. Con il backend, è necessario creare il styles.cssfile in ../view/adminhtml/css/style.css.

— Thao Pham,

provato e messo # contact-form {border: 1px solid blue! important; } non ha funzionato ... il file è in vista / frontend / css / styles.css e <css src = "Magento_Contact :: css / styles.css" /> è in contact_index_index.xml nel <head> </head> elemento .... nessun bordo blu attorno al modulo ... davvero strano ..

— Lachezar Raychev

Nvm ... ho dovuto creare la cartella Magento_Contact in static / frontend / Magento / luma / sv_SE e dentro creare la cartella css / e dentro mettere il file styles.css ... ora funziona. Ho solo pensato che in questo modo avrebbe importato il modulo file nella cartella module-contact / view / frontend / css / ...

— Lachezar Raychev

8

Prova questi passaggi.

Crea il file css in questa directory. app / design / frontend / Venditore / tema / web / css / customcss.css
Crea il file default_head_blocks.xml se non esiste in questo percorso app / design / frontend / Vendor / theme / Magento_Theme / layout / default_head_blocks.xml

Inserisci il codice seguente in 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>

Spero che questo ti aiuti !!

— Makwana Ketan
fonte

Devo eseguire i comandi di grugnito dopo aver fatto questo?

— TheBlackBenzKid,

1

il nome del file css è dinamico. ora, ho aggiunto questo codice <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> in "after.body.start "contenitore, come posso aggiungere questo codice in <head>?

— Mike,

6

Ho trovato la soluzione da solo.

Nel file XML di layout.

<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>

Nel file custom_head.phtml

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

— Mike
fonte

1

Crea un modello personalizzato

aggiungi lo spazio dei nomi di file xml / YourModule / view / frontend / layout / default_head_blocks.xml

questo file cambierà il layout della testa usando la configurazione della pagina leggi di più su http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

esempio di contenuto del 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>

quindi aggiungi il file css su questo percorso Spazio dei nomi / YourModule / view / frontend / web / css / custom.css

— Mohamed Abo Badawy
fonte

Grazie per la risposta. Ha funzionato per me. Ora css viene applicato in tutte le pagine usando questo file.

— Vinay Sikarwar,

Potete aiutarmi, come posso ora applicarlo solo nella pagina del prodotto

— Vinay Sikarwar,

Non ne sono sicuro, ma per quanto riguarda la classe corporea .catalog-product-view che magento usa nella pagina dei prodotti, puoi ereditarne le proprietà CSS!

— Mohamed Abo Badawy,