Cómo agregar un archivo CSS personalizado en Magento 2

30

¿Hay alguna manera de crear mi propio archivo CSS que se cargue en último lugar en la cascada?

Si es así, ¿cómo y dónde agrego mi archivo CSS personalizado?

magento2 css H. Ferrence
fuente

Respuestas:

43

Para agregar CSS personalizado y cargar al final, debe configurar un tema personalizado.

  1. Crear tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Asegúrese de configurar su aplicación Magento en el modo desarrollador.
  3. Agregue las siguientes carpetas a su tema personalizado

-

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Crea los siguientes archivos:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

coloque este código dentro de default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  1. Aplica tu tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. Implemente recursos estáticos (SSH en la raíz de magento):

-

php bin/magento setup:static-content:deploy
Joshua34
fuente
Hola, lo acabo de hacer, pero el archivo css que agrego no se carga, y cuando inspecciono la página me da un error GET para el archivo, con un 500 (Error interno del servidor) ¿tienes alguna idea de qué es? ¿puede ser?
alexcr
1
Comando de CLI para implementar: php bin / magento setup: static-content: deploy
Joshua34
¿Qué debo poner en los dos nuevos archivos CSS que creé? ¿Solo CSS puro?
styzzz
1
@styzzz sí, CSS sin procesar está bien.
Joshua34
Sip. Acabo de hacer eso, cargué los archivos local-m.css y local-l.css en web / css ... borré el caché y ejecuté php bin / magento setup: static-content: deploy. Estoy en modo desarrollador. Todavía no los está recogiendo. Mi default_head_blocks.xml es exactamente como el anterior. Pero todavía no usa esos stypes que configuré en el CSS
styzzz
15

Para agregar CSS personalizado y cargar el último

  1. Sigue la estructura del directorio

    app / code / vendor / modulename / view / frontend (para admin adminml) / web / css / filename.css

  2. Agregue la ruta del archivo CSS al archivo de diseño correspondiente como se indica a continuación

    <head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
Manish
fuente
Incluir Vendor_Moduleno funciona para mí. Eliminarlo funciona bien.
Saravanan DS
@SaravananDS debe reemplazarlo con el nombre de su paquete y módulo.
Manish
Sí. Después de reemplazar solo con mi personalizado Vendor_Module, no funciona.
Saravanan DS
@Manish, ¿podemos cargar archivos CSS personalizados solo en la página de resultados de búsqueda?
jafar pinjar
Aquí no es necesario utilizar el tema infantil?
HaFiz Umer
5

Puede agregar el atributo de medios que magento 2 colocará al final del css en la sección de encabezado. Establecer un ancho de solo 1px lo habilitará en todos los dispositivos:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>
Cypher909
fuente
gracias, me salvaste el día. No quiero trabajar con archivos .less y compilar cada vez que los edito.
bourax
aquí no es necesario hacer un tema personalizado primero?
HaFiz Umer
@HaFizUmer Primero debes crear un tema personalizado. Siga las instrucciones de la respuesta aceptada y luego use el método que muestro aquí.
Cypher909