Magento 2 - Wie füge ich benutzerdefinierte CSS-Dateien zum Kopf hinzu?

8

In Magento 1.x kann ich die CSS-Dateien mithilfe des Hilfsprogramms wie im folgenden Code zum Kopf hinzufügen.

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

Weiß jemand, wie man das in Magento 2 macht?

magento2 layout xml

— Mike
quelle

Hast du das geklärt? oder haben Sie eine Alternative dazu. Lassen Sie mich wissen, wenn Sie etwas herausfinden

— Dev

1

Entschuldigung, ich habe noch keine Lösung. Jetzt habe ich diesen Code <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> in "after.body.start" hinzugefügt "Container.

— Mike

Ich habe die Lösung gefunden, bitte überprüfen Sie die Antwort unten.

— Mike

9

Sie benötigen keinen Helfer, Sie können diesen Code unten in Ihrem Layout verwenden:

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

— Thao Pham
quelle

Weil ich eine dynamische CSS-Datei hinzufügen muss.

— Mike

Können Sie bitte das src-Beispiel für das Kontaktmodul angeben, wenn ich die Datei style.css auf der Seite mit dem Kontaktformular hinzufügen möchte? Ich habe versucht, <css src = "Magento_Contact :: css / styles.css" />, aber es hat nicht funktioniert ... Mir fehlt anscheinend der Fluss von Magento-Includes. Die Datei styles.css befindet sich im Ordner module-contact / view / css / ...

— Lachezar Raychev

Hallo @LachezarRaychev, wenn sich Ihr Handle im Frontend befindet, müssen Sie eine styles.cssDatei erstellen ../view/frontend/css/style.css. Mit dem Backend müssen Sie eine styles.cssDatei erstellen ../view/adminhtml/css/style.css.

— Thao Pham

habe das versucht und # contact-form {border: 1px solid blue! wichtig; } hat nicht funktioniert ... Datei befindet sich in view / frontend / css / styles.css und <css src = "Magento_Contact :: css / styles.css" /> befindet sich in contact_index_index.xml im <head> </ head> Element .... kein blauer Rand um die Form ... wirklich komisch ..

— Lachezar Raychev

Nvm ... ich musste den Ordner Magento_Contact in static / frontend / Magento / luma / sv_SE erstellen und darin den Ordner css / erstellen und die Datei styles.css darin ablegen ... jetzt funktioniert es. Ich dachte nur, dass es auf diese Weise das Dateiformat in den Ordner module-contact / view / frontend / css / importieren würde ...

— Lachezar Raychev

8

Versuchen Sie diese Schritte.

Erstellen Sie eine CSS-Datei in diesem Verzeichnis. app / design / frontend / Vendor / theme / web / css / customcss.css
Erstellen Sie die Datei default_head_blocks.xml , falls sie unter diesem Pfad nicht vorhanden ist. App / design / frontend / Vendor / theme / Magento_Theme / layout / default_head_blocks.xml

Fügen Sie den folgenden Code in default_head_blocks.xml ein

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

Hoffe das hilft dir !!

— Makwana Ketan
quelle

Muss ich danach irgendwelche Grunzbefehle ausführen?

— TheBlackBenzKid

1

Der CSS-Dateiname ist dynamisch. Jetzt habe ich diesen Code <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> in "after.body.start" hinzugefügt "container, wie kann ich diesen Code in <head> einfügen?

— Mike

6

Ich habe die Lösung selbst gefunden.

In der XML-Layoutdatei.

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

In der Datei custom_head.phtml

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

— Mike
quelle

1

Erstellen Sie ein benutzerdefiniertes Modell

Fügen Sie die XML-Datei Namespace / YourModule / view / frontend / layout / default_head_blocks.xml hinzu

Diese Datei ändert das Kopflayout mithilfe der Seitenkonfiguration. Weitere Informationen finden Sie unter http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

Beispiel für Dateiinhalt

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

Fügen Sie dann unter diesem Pfad eine CSS- Datei hinzu. Namespace / YourModule / view / frontend / web / css / custom.css

— Mohamed Abo Badawy
quelle

Danke für die Antwort. Es hat bei mir funktioniert. Jetzt wird CSS auf allen Seiten mit dieser Datei angewendet.

— Vinay Sikarwar

Können Sie mir helfen, wie ich es jetzt nur auf der Produktseite beantragen kann

— Vinay Sikarwar

Ich bin mir nicht sicher, aber was ist mit der Body-Klasse .catalog-product-view, die Magento auf der Produktseite verwendet? Sie könnten CSS-Eigenschaften davon erben!

— Mohamed Abo Badawy