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

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...
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...
Magento 2 – Añadir Url Canonical a las págin... Al igual que vimos cómo añadir Canonical a las categorías y productos en Magento 2, ahora vamos a ver cómo hacerlo en las páginas estáticas. P...
Activar modo desarrollador o producción en Magento... Antes de ponerte a tocar nada de tu tienda Magento 2, ya sea actualizar o aplicar parches, debes poner tu tienda en modo desarrollador o al final en m...

Deja un comentario

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

*