¿Cuál es la forma correcta de posicionar / ordenar archivos CSS en Magento 2?

13

En el Magento 2 DevDoc dice

Para incluir un archivo CSS, agregue el bloque <css src = "<path> / <file>" media = "print | <option>" /> en la sección <head> en un archivo de diseño.

Sin embargo, no dice cómo podemos influir en el orden de nuestros archivos CSS. Y si agregamos archivos CSS de esta manera en un tema personalizado que tiene un tema principal, el resultado es que los archivos se agregan bastante en la parte superior de la sección <head> con muchos otros archivos CSS debajo de ellos, lo que significa que su prioridad es bastante bajo y no podemos anular fácilmente las reglas del tema principal o las extensiones.

Hubo problemas similares en Magento 1 y hubo soluciones. Algunos estaban más limpios, otros menos.
¿Cuál es la mejor manera de ordenar un archivo CSS de un tema personalizado en la parte inferior de <head> en Magento 2, si es posible cumpliendo con las pautas de diseño de Magento 2 para temas personalizados?

magento2 layout css head Jey DWork
fuente

Respuestas:

13

Magento2 no tiene un mecanismo incorporado para esto, así que decidí tratarlo como una oportunidad para escribir mi primera extensión de Magento2. ¡La extensión Quickshiftin \ Assetorderer ahora está disponible en GitHub!

Una vez que tenga instalada la extensión, puede especificar un atributo de orden en sus etiquetas XML CSS .

<head>
  <css src="css/page/home.css" order="100"/>
</head>

También puede usar el atributo de orden en archivos XML de diseño como default_head_blocks.xml. Cualquier etiqueta css para la que no especifique un pedido se trata como si tuviera un pedido de 1.

quickshiftin
fuente
Muchas gracias. Tu extensión funcionó para mí. Pero enfrentó dos problemas, uno en di.xml y otro en Quickshiftin \ Assetorderer \ View \ Asset \ File.
Pankaj Pareek
Hola @PankajPareek, son buenas y malas noticias. ¿Hay alguna posibilidad de que pueda elaborar en GitHub y posiblemente contribuir con una solicitud de extracción? ¡Sería bueno hacer que la extensión sea útil para todos!
quickshiftin
@quickshiftin Esta extensión funcionó en v2.0, pero no en v2.1.1. Sin embargo, descubrí por casualidad que ya no es necesario en v2.1.1 porque cuando agrego order="1"el archivo se ordena correctamente. No importa cuál sea el atributo siempre que agregue un atributo adicional. Para validarlo, puede cambiarlo data-order="1"y aún funcionaría.
thdoan
orden de trabajo para el archivo js también.
Jalpesh Patel
@quickshiftin has actualizado tu módulo para el M2.2.2
PЯINCƏ
7

Puede agregar el mediaatributo al elemento css. Esto lo agregará al final de todo el CSS incluido en la cabeza.

<head>
    <css src="css/styles.css" media="all" />
</head>
andyace
fuente
¿Qué pasa si lo quiero primero?
TheBlackBenzKid
Esto todavía cargará CSS personalizado antes de los archivos CSS principales de magento 2 :(
Jonathan Marzullo
A partir de M2.2.1 es la única solución que funcionó para mí. Agregar 'order = "X"' al nodo <css> arroja un error ya que este atributo no está permitido.
Dynomite
2

Yo respondí en detalle acerca de cómo Magento hace css y cómo el ordenamiento está sucediendo detrás de la escena.

Algunos puntos adicionales que debo mencionar aquí son:

  1. Si desea renderizar su archivo css personalizado después style-m.cssy stlyle-l.css, entonces necesita definir su archivo css como se muestra a continuación:

    <css src="Magento_Theme:css/path/file.css" media="all" />

  2. Si desea cargar su archivo css personalizado antes style-m.cssy stlyle-l.css, entonces debe incluir su archivo css a través del archivo xml de diseño default_head_blocks.xmly agregar su archivo css personalizado arriba style-m.cssy stlyle-l.css.

  3. Las propiedades CSS son finitas y están bien definidas en el esquema de diseño. De acuerdo con el esquema de diseño, puede usar las siguientes propiedades en su archivo css.

    Archivo: vendor/magento/framework/View/Layout/etc/head.xsd

    <xs:complexType name="linkType">
    <xs:attribute name="src" type="xs:string" use="required"/>
    <xs:attribute name="defer" type="xs:string"/>
    <xs:attribute name="ie_condition" type="xs:string"/>
    <xs:attribute name="charset" type="xs:string"/>
    <xs:attribute name="hreflang" type="xs:string"/>
    <xs:attribute name="media" type="xs:string"/>
    <xs:attribute name="rel" type="xs:string"/>
    <xs:attribute name="rev" type="xs:string"/>
    <xs:attribute name="sizes" type="xs:string"/>
    <xs:attribute name="target" type="xs:string"/>
    <xs:attribute name="type" type="xs:string"/>
    <xs:attribute name="src_type" type="xs:string"/>
</xs:complexType>

    Esto simplemente significa que no puede usar orderninguna otra propiedad junto con la definición de CSS en su archivo xml de diseño. Al hacerlo, obtendrá una excepción que indica que la validación del esquema falla.

Rajeev K Tomy
fuente
1

Puede hacer que sus reglas CSS sean más o menos importantes que las reglas CSS básicas al agregar o eliminar selectores primarios adicionales.
Por ejemplo, veamos una regla CSS de muestra en el núcleo:

.cart.table-wrapper .item .col.item {
    padding: 20px 8px 20px 0;
}

Puede hacer que su regla personalizada sea más importante agregando un selector principal, por ejemplo:

body .cart.table-wrapper .item .col.item {
    padding: 10px 8px 20px 0;
}

o

body .cart.table-wrapper .item td.col.item {
    padding: 10px 8px 20px 0;
}

Puede hacer que su regla personalizada sea menos importante eliminando un selector principal, por ejemplo:

.item td.col.item {
    padding: 30px 8px 20px 0;
}
Mage2.PRO
fuente
3
Claro, también podría simplemente golpear !important(pero, por supuesto, su enfoque es aún mejor que eso) o implementar una clase de prefijo de proveedor con MENOS. Aún así, esto agrega gastos innecesarios y complejidad. ¿Por qué prefijar cientos o más reglas cuando un simple cambio de orden del CSS lo haría? Así que todavía estoy buscando una buena manera de resolver esto en el lado de Magento ...
Jey DWork
Además, cuando se trata de otros recursos, el posicionamiento CSS puede ser aún más importante ya que las soluciones alternativas pueden ser aún más feas.
Jey DWork
66
Esa no es una respuesta
Ahmad Alfy