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

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.

Cree un archivo CSS en este directorio. app / design / frontend / Vendor / theme / web / css / customcss.css
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