Wie füge ich eine CSS-Datei in Vorlagen (.phtml-Datei) in Magento 2 ein?

8

Geben Sie hier die Bildbeschreibung ein

Ich wollte den Inhalt des Style-Tags in einem separaten Ordner ablegen und in diese customtext.phtmlDatei aufnehmen.

Wie kann ich das machen?

magento2 Lerner
quelle
Haben Sie eine CSS-Datei in Ihrem Modul / Thema getrennt?
Rakesh Jesadiya

Antworten:

5

Sie können eine CSS-Datei in der HTML-Datei hinzufügen, indem Sie die folgende Zeile verwenden:

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('css/mystyle.css')?>">

wo sich der Pfad von mystyle.css unter der Position befindet,

app/design/frontend/{Packagename}/{themenane}/web/css/mystyle.css

Vielen Dank.

Rakesh Jesadiya
quelle
Ich habe meine Datei customtext.phtml in meinem Magento_Search-Verzeichnis. Sollte ich den vollständigen Pfad der CSS-Datei in href angeben müssen?
Lerner
Wenn ich eine Javascript-Datei hinzufügen wollte, wie soll ich das machen?
Lerner
Versuchen Sie es mit Code, <script type = "text / javascript"> <? Php echo $ block-> getViewFileUrl ('js / myscript.js')?> </ Script>
Rakesh Jesadiya
Entschuldigung, es funktioniert nicht .. !!
Lerner
<script src = "<? php echo $ block-> getViewFileUrl ('js / myscript.js')?>"> </ script> versuchen Sie es mit dieser Formel
Rakesh Jesadiya
4

Sie sollten vermeiden, der Vorlage Stile hinzuzufügen. Es ist nicht gut für die Wartung und in Zukunft schwer zu debuggen

Für Ihre Zwecke
Option Hinzufügen von CSS-Stilen zu Vorlagen Beispiel
: styles.phtml

/** @var $block your block class extend \Magento\Framework\View\Element\Template **/
<style type="text/css">
   // Your css code here
</style>

Option Datei CSS in Vorlage einschließen

Layout

<?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">
    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="head.additional.custom.styles" template="styles/style.phtml">
                <arguments>
                    <argument name="file_name" xsi:type="string">yourstyle.css</argument>
                </arguments>
            </block>
        </referenceBlock>    
    </body>
</page>

Block Magento\Framework\View\Element\Templateist mein Beispiel. Verwenden Sie Ihren eigenen Block, um die URL abzurufen, und verwenden Sie das Beispiel einer Blockklasse als Antenstor

Template style.phtml

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>

<link rel="stylesheet" type="text/css" media="all" href="<?php /* @escapeNotVerified */ echo $block->getCssUrl() ?>"/>

Erste Option zum Testen. Sie sollten den zweiten verwenden

mrtuvn
quelle
2

Befolgen Sie die folgenden Schritte.

Erstellen Sie eine CSS-Datei unter dem folgenden Pfad.

app/design/frontend/Vendor/theme/web/css/customcss.css

default_head_blocks.xmlDatei erstellen , falls nicht unter dem folgenden Pfad vorhanden:

app/design/frontend/Vendor/theme/Magento_Theme/layout/default_head_blocks.xml

Geben Sie den folgenden Code ein 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>

Hoffe das hilft dir !!

Abhinav Singh
quelle
Sollen wir also Klassen in jedem Modul verwenden, indem wir nur den Klassennamen im Tag erwähnen? !!
Lerner