Problemi con meno variabili in _theme.less

Question

Io uso sotto le query multimediali nel mio personalizzato _theme.less come

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

.

Ma quando eseguo questo comando bin/magento setup:static-content:deploy Io ottengo generatori variabiliGODICETAGCODE Cosa c'è in questo caso? Usando Grunt compiles senza errori.

Answer 1

@fefe La variabile @media-common è inizialmente impostata in:

.

• vendor/magento/theme-frontend-blank/web/css/styles-m.less

• vendor/magento/theme-frontend-blank/web/css/styles-l.less

Questo è se stai usando il tema vuoto o Luma come genitore. Se è così, allora questo vale per te. In caso contrario, qualunque sia il tema del genitore, dovrebbe avere una dichiarazione e l'inizializzazione di questa variabile ... o se il tema del genitore stai usando le chiamate un altro per il suo genitore, lo stesso vale.

Dai un'occhiata ai file styles-m.less e styles-l.less per vedere l'ordine in cui vengono importati meno file. Puoi anche aggiungere una qualche forma di registrazione su \Less_Parser::parseFile().

Il modo in cui mi sono avvicinato a questo è quello di usare un importazione di riferimento meno Meno Documenti : Opzione di importazione di riferimento , che sarà non Tirare il codice all'interno di detta meno file, apporterà solo i file disponibili nell'ambito del file che richiede l'importazione.

Un esempio di ciò che ho importato nella parte superiore di un file meno personalizzato:

@import (reference) "../source/lib/variables/_responsive.less"; @import (reference) "../source/lib/_responsive.less";

* Nota il percorso che sto usando qui in relativo al mio percorso personalizzato di tema di tema personalizzato in relazione all'eventuale percorso var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/.

La mia gerarchia directory tema personalizzata è simile a questo: app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less.

I file che voglio importare sono qui:

.

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/_responsive.less

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/variables/_responsive.less

Il mio file personalizzato, che farà l'importazione, alla fine vivrà qui:

.
• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/custom/custom.less

Ora, con tutto ciò che detto qui è il kicker, non hai davvero bisogno di farlo. Perché? Bene, non sono gli stili CSS all'interno del Guardie CSS , in questo caso @media-common = true significava solo essere chiamato con il file styles-m.less? Sì, poiché M2 dovrebbe prima essere mobile e quindi il file styles-m.less è l'unico file (salva alcuni file in meno e-mail e penso che pochi altri) che in realtà abbia un @media-common impostato su true (e ci sono solo manciate questa variabile, periodo).

Così tutto ciò che si trova all'interno di una protezione CSS che ha la condizione di @media-common = true è destinata a essere sempre eseguita, ad eccezione di quando viene chiamato il file styles-l.less. styles-l.less Sets @media-common a false Poiché il file styles-m.less ha già caricato questi stili "comuni" ... e se si guarda in vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml vedrai che styles-m.css (che viene generato da styles-m.less se non è già generato dev docs: .css Richiesta di. Senza ricerca - Altro qui ) viene caricato prima di styles-l.css.

Ciò significa che potresti letteralmente aggirare quell'errore definendo @media-common: true; nella parte superiore del tuo file di meno personalizzato e in base a ciò che ho descritto sopra e cosa ho intenzione di prendersi cura del codice l'errore.

Ecco il problema: Se si includono i file source/lib/_responsive.less e source/lib/variables/_responsive.less o definendo il proprio @media-common: true; nella parte superiore del tuo file personalizzato, questo sovrascriverà l'assegnazione @media-common: false; in styles-l.less, quindi sei Andando per ottenere la duplicazione del codice in styles-m.less e styles-l.less. Non vedo in alcun modo intorno a questo al momento. Il problema radice di questo è che i nostri file minori personalizzati non vengono caricati dopo sia styles-m.less e styles-l.less o che il valore della variabile della variabile @media-common non viene portato nell'ambito dei nostri file personalizzati. Questo non dovrebbe essere il caso, se stiamo importando il nostro personalizzato meno tramite il file _extend.less, che i documenti (suggeriscono), poiché si dispone di quanto segue alla fine di styles-m.less e styles-l.less:

//@magento_import 'source/_extend.less';

.

Spero che questo ti abbia dato sia intuizione che di una soluzione immediata al tuo problema.

Se tu o chiunque altro venga con una soluzione migliore, sono tutte le orecchie.

Aggiornamento Quindi ignorare ciò che ho menzionato sopra per quanto riguarda la duplicazione del codice. Nel mio caso sono entrambe aggiunte un'inclusione esplicita del mio CSS personalizzato in una pagina e ho anche aggiunto il mio file minore personalizzato al _extend.less di tema.

Stavo modificando app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml per includere quanto segue:

<head> <!-- ADD PAGE-SPECIFIC STYLES SHEETS HERE --> <css src="css/pages/homepage.css" /> </head>

E ho anche avuto una voce in app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less di:

@import "../pages/homepage.less";

Quello che ho trovato è che sia o, non entrambi. Quindi in questo caso quando M2 stava cercando di elaborare un r

EQUIEST PER http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css Carica il file homepage.less appropriato e questo file non avrebbe generatori @media-common nell'ambito della sua portata, quindi l'errore stava dicendo.Per aggirare ciò, aggiungere riferimenti all'importazione come ho menzionato sopra e non saranno alcuna duplicazione del codice.Inoltre, ma rimuovendo la voce da _extend.less il mio styles-m.less e generacodicitagCode non cercheranno il file styles-l.less e non ci sono duplicazioni di codice.

.
• Il mio esempio qui è per gli stili specifici della homepage ... Ma questo illustra una situazione in cui non stavo usando il sistema correttamente ed è per questo che stavo ottenendo quell'errore.Spero che questo aiuti