Magento 2 - Ignora CSS senza usare! Important ovunque

Al momento sto lavorando su un sito Magento 2 per un cliente. Supponiamo che il marchio del mio cliente sia boofare il tema che sto cercando di estendere / sostituire sia foobarche ho impostato come tema principale utilizzandofrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Quindi sotto frontend/Foobarthemes/boofar/web/css/source/_theme.lessho scritto il codice CSS che voglio sovrascrivere. Ho anche provato questo con _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

Sono costretto a usare !importantqualsiasi cosa per lavorare qui. Nessuna delle cose di carattere e testo funziona nel codice sopra.

Non ho compreso correttamente il flusso di lavoro del frontend Magento 2?

Vuoi avere i tuoi stili nel _theme.lessfile solo se vuoi sovrascrivere il _theme.lessfile del tema principale . Per quel file, ne viene caricato solo uno, e sarà sempre il tema selezionato se il file esiste lì. Da lì, utilizzerà lo schema di fallback per trovare quel file e utilizzarlo.

Quindi, nel tuo caso, usare il _extend.lessfile è il file giusto da usare.

Questo è un po 'confuso, dato che il codice inserito nel _extend.lessfile viene caricato per ultimo nel momento in cui Magento compila tutti gli stili esistenti nel sito. Quindi mi chiedo se c'è qualcosa che non va nell'ordine di caricamento.

Osservando il modo in cui è stato impostato, prova a impostare il tema in uno spazio dei nomi diverso e non nello stesso tema. Questo potrebbe non risolvere il problema, poiché il modo in cui hai impostato il tema è lo stesso di Magento con il tema luma / vuoto impostato. Ma per tutto il lavoro che ho svolto, ho lo spazio dei nomi del mio distributore che poi si estenderà da un tema di terze parti o da luma / blank.

La prossima cosa da provare sarebbe racchiudere il codice nelle query multimediali integrate. Vado più in dettaglio qui , ma in fondo si ferma gli stili da essere caricato due volte nei styles-l.csse dei styles-m.cssfile.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

Da lì, tutto si riduce alla specificità CSS. Se c'è qualcos'altro più alto del tuo, devi essere più specifico nella definizione della tua classe / id negli stili. Potresti voler pubblicare un'immagine della struttura DOM per mostrare ciò che stai prendendo di mira e cosa sta cavalcando ciò che stai cercando di raggiungere.

Se riesci ad applicare i tuoi stili nel file _extend.less, ciò significa che hai problemi con la specificità dei CSS. Poiché Magento2 utilizza meno compilation, la maggior parte degli stili è molto specifica. Per sovrascriverli, i selettori di stile devono essere più o ugualmente specifici. Non posterò qui i dettagli del concetto stesso in quanto ci sono molti articoli che possono essere trovati online.

Se stai utilizzando l'impostazione LESS predefinita, assicurati che TUTTO il tuo LESS sia scritto nelle query multimediali M2 LESS. In caso contrario, finirai con CSS duplicati e probabilmente problemi di specificità.

Tutto questo dipende dalla specificità e dall'ordine di caricamento, il tuo CSS dovrebbe essere caricato dopo i temi (o moduli) principali, quindi per ignorare tutto ciò che devi fare è soddisfare la loro specificità.

Ad esempio se viene utilizzato il tema principale

.parent-selector .selector {
    ...
}

Quindi dovresti scrivere lo stesso selettore, se per qualche motivo che non funziona devi solo aggiungere un altro selettore prima di esso. Un modo semplice è quello di aggiungere un corpo prima di esso, in quanto copre ogni selettore e aggiunge specificità. Così:

body .parent-selector .selector {
    ...
}

Questo articolo contiene alcune buone informazioni sulla specificità CSS.

In alternativa è possibile sovrascrivere l'intero file

Se si stanno effettuando molte personalizzazioni, è consigliabile sovrascrivere l'intero file anziché estenderlo. Per fare ciò basta aggiungere il file al tema usando lo stesso percorso e nome del file.

Per priorità più alta è possibile duplicare il selettore:

  .home.home {
    display: none;
  }

Devi sovrascrivere lo stesso .lessfile del tema principale che desideri sostituire, come se desideri sovrascrivere il _theme.lessfile, quindi devi copiare questo file sul tema secondario qui (assicurati che lo stesso percorso del tema principale)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

puoi sovrascrivere i tuoi CSS qui.

Iniettare i tuoi file CSS personalizzati è meglio.

Ulteriori informazioni: come aggiungere un file CSS personalizzato in Magento 2

E Mage Docs: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

Ricorda di compilare usando grunt / less per elaborare il CSS: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html