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 – Actualizarlo desde consola con c... Hay dos maneras de actualizar Magento2. Una desde el panel, llamada Wizard, que podemos encontrar en System > Tools > Web Setup Wizard donde esc...
Magento2 – Crear Crontab para magento Magento2 necesita poner en marcha tareas cada X tiempo. Esos es indexación, envío emails, actualizaciones... Para ello, hay que crear un Crontab. Pero...
Magento 2 – Instalación hay varias maneras de instalar Magento 2. Vamos a ver el modo más típico: subir, descomprimir e instalar. 1: Descargamos Magento 2 Lo primero qu...
Magento2 – Quitar sufijo html de las urls Por defecto, Magento2 nos añade el sufijo .html a todas las páginas de productos y categorías. Para poder quitarlo desde el panel deberemos seguir las...

Deja un comentario

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

*