Magento 2 - Comment ajouter des fichiers css personnalisés dans la tête?

8

Dans Magento 1.x, je peux ajouter les fichiers CSS dans la tête en utilisant l'aide comme le code ci-dessous.

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

Quelqu'un sait comment faire cela dans Magento 2?

magento2 layout xml Mike
la source
avez-vous réglé cela? ou avez-vous un suppléant à ce sujet. faites-moi savoir si vous en découvrez
Dev
1
désolé, je n'ai pas encore de solution. maintenant, j'ai ajouté ce code <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> into "after.body.start " récipient.
Mike
J'ai trouvé la solution, veuillez vérifier la réponse ci-dessous.
Mike

Réponses:

9

Vous n'avez pas besoin d'aide, vous pouvez utiliser ce code ci-dessous dans votre mise en page:

<head>
    <css src="Namespace_YourModule::css/styles.css"/>
</head>
Thao Pham
la source
Parce que je dois ajouter un fichier CSS dynamique.
Mike
Pouvez-vous s'il vous plaît fournir l'exemple src pour le module de contact si je veux ajouter un fichier style.css dans la page avec le formulaire de contact? J'ai essayé <css src = "Magento_Contact :: css / styles.css" /> mais cela n'a pas fonctionné ... Il me manque apparemment le flux de magento. Le fichier styles.css se trouve dans le dossier module-contact / view / css / ...
Lachezar Raychev
Bonjour @LachezarRaychev, si votre poignée en frontend, vous devez créer un styles.cssfichier ../view/frontend/css/style.css. Avec le backend, vous devez créer un styles.cssfichier dans ../view/adminhtml/css/style.css.
Thao Pham, le
essayé cela et mettre # contact-form {border: 1px solid blue! important; } n'a pas fonctionné ... le fichier est en vue / frontend / css / styles.css et <css src = "Magento_Contact :: css / styles.css" /> est dans contact_index_index.xml dans le <head> </head> élément .... pas de bordure bleue autour de la forme ... vraiment bizarre ..
Lachezar Raychev
Nvm ... j'ai dû créer le dossier Magento_Contact dans static / frontend / Magento / luma / sv_SE et à l'intérieur créer le dossier css / et à l'intérieur mettre le fichier styles.css ... maintenant ça marche. Je pensais juste que de cette façon, il importerait le formulaire de fichier dans le dossier module-contact / view / frontend / css / ...
Lachezar Raychev
8

Essayez ces étapes.

  1. Créez un fichier css sous ce répertoire. app / design / frontend / Vendor / theme / web / css / customcss.css
  2. Créez le fichier default_head_blocks.xml s'il n'existe pas sur ce chemin app / design / frontend / Vendor / theme / Magento_Theme / layout / default_head_blocks.xml

Mettez le code ci-dessous dans 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>

J'espère que cela vous aide !!

Makwana Ketan
la source
Dois-je exécuter des commandes de grognement après avoir fait cela?
TheBlackBenzKid
1
le nom du fichier css est dynamique. maintenant, j'ai ajouté ce code <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> into "after.body.start "conteneur, comment puis-je ajouter ce code dans <head>?
Mike
6

J'ai trouvé la solution moi-même.

Dans le fichier xml de mise en page.

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

Dans le fichier custom_head.phtml

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

Créer un modèle personnalisé

ajouter un fichier xml Namespace / YourModule / view / frontend / layout / default_head_blocks.xml

ce fichier changera la disposition des têtes en utilisant la configuration de la page. En savoir plus sur http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

exemple de contenu de fichier

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

puis ajoutez le fichier css sur ce chemin Namespace / YourModule / view / frontend / web / css / custom.css

Mohamed Abo Badawy
la source
Merci d'avoir répondu. Ça a marché pour moi. Maintenant css est appliqué dans toutes les pages utilisant ce fichier.
Vinay Sikarwar
Pouvez-vous m'aider, comment je peux maintenant l'appliquer uniquement dans la page produit
Vinay Sikarwar
Je ne suis pas sûr de cela, mais qu'en est-il de la classe de corps .catalog-product-view que magento utilise sur la page des produits, vous pouvez en hériter des propriétés CSS!
Mohamed Abo Badawy