Cómo agregar un archivo CSS personalizado en Magento 2

¿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:

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

Crear tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Asegúrese de configurar su aplicación Magento en el modo desarrollador.
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>

Aplica tu tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
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

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

@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

Para agregar CSS personalizado y cargar el último

Sigue la estructura del directorio

app / code / vendor / modulename / view / frontend (para admin adminml) / web / css / filename.css
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

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