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

Publicada el por

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. Empecemos con Magento 2 – Añadir fichero CSS a nuestro.

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

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

En nuestro ejemplos quedría algo así:

/{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:

/{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:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nonamespaceschemalocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
  <css src="Trescomatres_MiModulo::css/pikaday.css">
    <css src="Trescomatres_MiModulo::css/theme.css">
      <referencecontainer name="content">       
        <block class="Trescomatres\MiModulo\Block\Mimodulo" name="mimodulo" template="Trescomatres_MiModulo::mimodulo.phtml">
        </block>
      </referencecontainer>
    </css>
  </css>
</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. Espero que os sea de utilidad el artículo Magento 2 – Añadir fichero CSS a nuestro.

Más información