Qual é a maneira correta de posicionar / ordenar arquivos CSS no Magento 2?

13

Para incluir um arquivo CSS, adicione o bloco <css src = "<path> / <file>" media = "print | <option>" /> na seção <head> em um arquivo de layout.

No entanto, não diz como podemos influenciar a ordem dos nossos arquivos CSS. E se adicionarmos arquivos CSS dessa maneira em um tema personalizado com um tema pai, o resultado é que os arquivos são adicionados na parte superior da seção <head> com muitos outros arquivos CSS abaixo deles, o que significa que sua prioridade é bastante baixo e não podemos substituir facilmente as regras do tema ou das extensões pai.

Houve problemas semelhantes no Magento 1 e houve soluções alternativas. Alguns eram mais limpos, outros menos.
Qual é a melhor maneira de solicitar um arquivo CSS de um tema personalizado na parte inferior do <head> no Magento 2 - se possível, cumprindo as diretrizes de layout do Magento 2 para temas personalizados?

— Jey DWork
fonte

13

O Magento2 não possui um mecanismo interno para isso, então decidi tratá-lo como uma oportunidade de escrever minha primeira extensão do Magento2. A extensão Quickshiftin \ Assetorderer já está disponível no GitHub!

Depois de instalar a extensão, você pode especificar um atributo de pedido nas suas tags XML CSS .

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

Você também pode usar o atributo order em arquivos XML de layout, como default_head_blocks.xml. Quaisquer tags css para as quais você não especifica um pedido são tratadas como se tivessem um pedido de 1.

— troca rápida
fonte

Muito Obrigado. Sua extensão funcionou para mim. Mas enfrentou dois problemas, um em di.xml e outro na classe Quickshiftin \ Assetorderer \ View \ Asset \ File.

— Pankaj Pareek

Olá @PankajPareek, são boas e más notícias. Alguma chance de você elaborar no GitHub e possivelmente contribuir com uma solicitação de recebimento? Seria bom tornar a extensão útil para todos!

— quickshiftin

@quickshiftin Esta extensão funcionou na v2.0, mas não na v2.1.1. No entanto, descobri por acaso que não é mais necessário na v2.1.1 porque quando adiciono order="1"o arquivo é ordenado corretamente. Não importa qual é o atributo, desde que você adicione um atributo extra. Para validar, você pode alterá-lo para data-order="1"e ainda funcionaria.

— thdoan

ordem de trabalho para o arquivo js também.

— Jalpesh Patel

@quickshiftin você atualizou seu módulo para o M2.2.2

— PЯINCƏ

7

Você pode adicionar o mediaatributo ao elemento css. Isso o adicionará ao final de todo o CSS incluído na cabeça.

<head>
    <css src="css/styles.css" media="all" />
</head>

— andyace
fonte

E se eu quiser primeiro?

— TheBlackBenzKid

Isso ainda carregará CSS personalizado antes dos principais arquivos CSS principais do magento 2 :(

— Jonathan Marzullo 11/11

A partir do M2.2.1, é a única solução que funcionou para mim. A adição de 'order = "X"' ao nó <css> gera um erro, pois esse atributo não é permitido.

— Dynomite

2

Eu respondi em detalhes aqui sobre como o magento renderiza css e como a ordem está acontecendo nos bastidores.

Alguns pontos extras que preciso mencionar aqui são:

Se você quiser renderizar seu arquivo css personalizado depois de style-m.csse stlyle-l.css, precisará definir seu arquivo css como abaixo:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
Se você deseja carregar seu arquivo css personalizado antes style-m.csse stlyle-l.css, então, você precisa incluir o arquivo css através do arquivo xml de layout default_head_blocks.xmle adicionar seu arquivo css personalizado acima style-m.csse stlyle-l.css.

As propriedades CSS são finitas e estão bem definidas no esquema de layout. De acordo com o esquema do layout, você pode usar as seguintes propriedades no seu arquivo css.

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

Isso significa simplesmente que você não pode usar orderou quaisquer outras propriedades junto com a definição de css no arquivo xml de layout. Ao fazer isso, você receberá uma exceção que indica falha na validação do esquema.

— Rajeev K Tomy
fonte

1

Você pode tornar suas regras CSS mais ou menos importantes que as regras CSS principais, adicionando ou removendo seletores pai adicionais.
Por exemplo, vamos ver uma regra de CSS de amostra no núcleo:

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

Você pode tornar sua regra personalizada mais importante adicionando um seletor pai, por exemplo:

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

ou

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

Você pode tornar sua regra personalizada menos importante removendo um seletor pai, por exemplo:

.item td.col.item {
    padding: 30px 8px 20px 0;
}

— Mage2.PRO
fonte

3

Claro e eu também poderíamos simplesmente dar um tapa !important(mas é claro que sua abordagem ainda é melhor que isso) ou implementar uma classe de prefixo de fornecedor com LESS. Ainda assim, isso adiciona sobrecarga e complexidade desnecessárias. Por que prefixar centenas ou mais regras quando uma simples alteração de ordem do CSS faria isso? Então, eu ainda estou procurando uma boa maneira de resolver isso no lado do Magento ...

— Jey Dwork

Além disso, quando se trata de outros recursos, o posicionamento CSS pode ficar ainda mais importante, pois as soluções alternativas podem ficar ainda mais feias.

— Jey Dwork

6

Isso não é resposta

— Ahmad Alfy 17/03/16