Magento 2 – Añadir fichero CSS a nuestro módulo

Si ya vimos en el anterior artículo cómo añadir ficheros propios de JavaScript en nuestro módulo de Magento2, ahora vamos a ver cómo añadir nuestros propios ficheros CSS al módulo que estemos creando.

Lo primero que debemos hacer es añadir los ficheros CSS a nuestro módulo. Veamos en qué carpeta hay que subirlos:

1
/{Vendor}/{Modulo}/view/frontend/web/css/

En nuestro ejemplos quedría algo así:

1
2
/{Vendor}/{Modulo}/view/frontend/web/css/pikaday.css
/{Vendor}/{Modulo}/view/frontend/web/css/theme.css

Una vez ya los tenemos dentro de nuestro módulo en la carpeta que les toca, ahora tenemos que decirle que los cargue. Dónde se produce la orden que cargue estos ficheros. En el fichero que tenemos en el layout:

1
/{Vendor}/{Modulo}/view/frontend/layout/{modulo}_index_index.xml

Y el contenido, y veréis a continuación que se hace la llamada, de dicho fichero deberá ser algo parecido a lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
  <head>
    <css src="Trescomatres_MiModulo::css/pikaday.css"/>
    <css src="Trescomatres_MiModulo::css/theme.css"/>
  </head>
  <body>
    <referenceContainer name="content">
      <block class="Trescomatres\MiModulo\Block\Mimodulo" name="mimodulo" template="Trescomatres_MiModulo::mimodulo.phtml" />
    </referenceContainer>
  </body>
</page>

Si os fijáis, lo que tendréis que añadir al fichero es el apartado head. En él se cargan los dos ficheros CSS indicando las rutas.

Como podéis ver, no me adentro en temas técnicos. Entiendo que si habéis llegado a este artículo es porque ya habéis creado un módulo y lo único que queréis saber es como añadir ficheros CSS.

Como siempre, si no sabéis de qué estamos hablando, no estáis seguros de qué hacéis… no lo hagáis. Y si dáis el paso, antes copia de seguridad.

Más información

Artículos relacionados

Magento 2 – Error 404 en la página de inicio... En muchas ocasiones, normalmente cuando estás poniendo Magento 2 en marcha, haces muchos cambios que te obligan a realizar limpiados de caché, reindex...
Magento2 – Añadir Captcha al formulario de c... Para añadir más seguridad a nuestra web, muchos optamos por añadir el código captcha en los diferentes formularios que dispone nuestra página. Para el...
Cambiar contraseña usuario de Magento 2 desde la b... El tema de las contraseñas olvidadas es el pan de cada día. Usuarios en WordPress, Prestashop o Magento. En este caso mostramos como cambiar la contra...
Magento 2 – Migrar magento de local a servid... Os dejo algunos pasos a seguir para poder migrar un magento 2 de local a servidor de producción. Lo hago en forma de guía, sin detallar cada uno de lo...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*