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 – 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...
Deshabilitar módulos en Magento 2 por consola Veamos cuál son las órdenes que debemos utilizar en consola para deshabilitar los módulos en Magento 2 Aquí están las órdenes a aseguir (si está ...
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...
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...

Deja un comentario

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

*