Magento 2 - ¿Cómo agregar archivos CSS personalizados en la cabeza?

8

En Magento 1.x, puedo agregar los archivos CSS en la cabeza usando el ayudante como se muestra a continuación.

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

¿Alguien sabe cómo hacer esto en Magento 2?

magento2 layout xml Miguel
fuente
¿Lo resolviste? o tienes alguna alternativa en esto. avíseme si descubre algo
Dev
1
lo siento, aún no tengo solución. ahora, agregué este código <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> en "after.body.start " envase.
Mike
Encontré la solución, verifique la respuesta a continuación.
Mike

Respuestas:

9

No necesita ayuda, puede usar este código a continuación en su diseño:

<head>
    <css src="Namespace_YourModule::css/styles.css"/>
</head>
Thao Pham
fuente
Porque necesito agregar un archivo css dinámico.
Mike
¿Puede proporcionar el ejemplo de src para el módulo de contacto si deseo agregar el archivo style.css en la página con el formulario de contacto? Intenté <css src = "Magento_Contact :: css / styles.css" /> pero no funcionó ... Me falta el flujo de magento aparentemente. El archivo styles.css está en la carpeta module-contact / view / css / ...
Lachezar Raychev
Hola @LachezarRaychev, si manejas la interfaz, necesitas crear un styles.cssarchivo ../view/frontend/css/style.css. Con el backend, necesitas crear un styles.cssarchivo ../view/adminhtml/css/style.css.
Thao Pham
probé eso y puse # contact-form {border: 1px solid blue! important; } no funcionó ... el archivo está a la vista / frontend / css / styles.css y <css src = "Magento_Contact :: css / styles.css" /> está en contact_index_index.xml en <head> </head> elemento ... sin borde azul alrededor del formulario ... realmente extraño ...
Lachezar Raychev
Nvm ... tuve que crear la carpeta Magento_Contact en static / frontend / Magento / luma / sv_SE y dentro crear la carpeta css / y poner dentro el archivo styles.css ... ahora funciona. Solo pensé que de esa manera importaría el formulario del archivo dentro del módulo contact / view / frontend / css / folder ...
Lachezar Raychev
8

Intenta estos pasos.

  1. Cree un archivo CSS en este directorio. app / design / frontend / Vendor / theme / web / css / customcss.css
  2. Cree el archivo default_head_blocks.xml si no existe en esta ruta app / design / frontend / Vendor / theme / Magento_Theme / layout / default_head_blocks.xml

Poner el siguiente código en 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>

¡¡Espero que esto te ayude!!

Makwana Ketan
fuente
¿Necesito ejecutar algún comando gruñido después de hacer esto?
TheBlackBenzKid
1
El nombre del archivo CSS es dinámico. ahora, agregué este código <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> en "after.body.start "contenedor, ¿cómo puedo agregar este código en <head>?
Mike
6

Encontré la solución yo mismo.

En el diseño del archivo xml.

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

En el archivo custom_head.phtml

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

Crear modelo personalizado

agregar espacio de nombres de archivo xml / YourModule / view / frontend / layout / default_head_blocks.xml

este archivo cambiará el diseño de la cabeza utilizando la configuración de la página. Lea más en http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

ejemplo de contenido de archivo

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

luego agregue el archivo CSS en esta ruta de espacio de nombres / YourModule / view / frontend / web / css / custom.css

Mohamed Abo Badawy
fuente
Gracias por la respuesta. Funcionó para mi. Ahora css se aplica en todas las páginas que usan este archivo.
Vinay Sikarwar
¿Me pueden ayudar? ¿Cómo puedo aplicarlo ahora solo en la página del producto?
Vinay Sikarwar
No estoy seguro de esto, pero ¿qué pasa con la clase de cuerpo .catalog-product-view que Magento usa en la página de productos, podría heredar las propiedades CSS de ella?
Mohamed Abo Badawy