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

Antworten:

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.

  1. Erstellen Sie eine CSS-Datei in diesem Verzeichnis. app / design / frontend / Vendor / theme / web / css / customcss.css
  2. 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