Differenza tra _module.less e _extend.less

C'è qualche differenza tra l'estensione di un tema usando _module.lesse _extend.less? E qual è la migliore pratica quando si estende un modulo / tema?

Il mio primo pensiero è stato che è meglio usarlo _module.lessquando si disegna un nuovo modulo e _extend.lessquando si estende un modulo. Ma Luma usa _module.lessquando estende il tema vuoto in modo che la teoria sia uscita dalla finestra.

L'unica differenza che posso vedere tra loro è _module.lessimportata prima della libreria reattiva e _theme.lessdove _extend.lessviene importata dopo di loro.

Questo è l'ordine in cui vengono importati vendor/magento/theme-frontend-blank/web/css/styles-l.less

//
//  Blank theme desktop styles
//  _____________________________________________

//  These desktop styles are added to mobile

//
//  Global lib + theme styles
//  ---------------------------------------------

@import '_styles.less';
@import (reference) 'source/_extends.less';

//
//  Magento Import instructions
//  ---------------------------------------------

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

//
//  Media queries collector
//  ---------------------------------------------

@import 'source/lib/_responsive.less';

@media-target: 'desktop'; // Sets target device for this file
@media-common: false; // Sets not to output common styles

//
//  Global variables override
//  ---------------------------------------------

@import 'source/_theme.less';

//
//  Extend for minor customisation
//  ---------------------------------------------

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

— Ben Crook
fonte

Risposte:

La risposta è in qualche modo nascosta nei documenti di Magento:

L'estensione di un tema utilizzando _extend.less è l'opzione più semplice quando sei soddisfatto di tutto il tema principale, ma desideri aggiungere più stili.

Leggi di più qui

Utilizzare _module.less quando si desidera apportare modifiche importanti agli stili per un modulo e utilizzare _extend.less per piccoli aggiustamenti. Troverai altri esempi su come sovrascrivere gli stili dei componenti nel link sopra.

— c.norin
fonte

L'ho letto, ma in realtà non spiega perché, sembra che non ci siano ragioni dietro. Sto cercando di capire se c'è qualche differenza. Ho usato _extend.less per tutte le mie modifiche poiché preferisco la coerenza all'uso di qualcosa perché "Magento l'ha detto".

— Ben Crook,

@BenCrook se la mia lettura in questi giorni mi serve, no. Se qualcuno dovesse aggiungere qualsiasi .lessfile nel proprio tema con lo stesso percorso di un file nel tema / modulo principale, questa è una sostituzione. Probabilmente potresti verificare creando un _module.less vuoto nel tuo tema e vedendo se si applicano gli stili originali.

— Darren Felton,

Dopo una php bin/magento setup:static-content:deploy, si può guardare in pub/static/frontend/<vendor>/<themeName>/<locale>/css/e pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/e ci saranno collegamenti simbolici per i file * .less a uno il tema o il tema del modulo / genitore è venuta da.

— Darren Felton,

Questo è corretto _module.less sovrascrive il file meno parent, non c'è ereditarietà o unione. Mi rendo conto che avrei potuto

— renderlo

@MattCosentino Mi rendo conto che questa risposta arriva molto tardi, ma la lascio qui nel caso qualcuno ci si imbatta in esso: si prega di notare la differenza tra _extends.less e _extend.less. I file _extend.less possono essere aggiunti a qualsiasi contesto di modulo, per estendere gli stili da un tema principale. _Extends.less si trova nella radice del tema e viene utilizzato per estendere i programmi di utilità esistenti (fare riferimento a <project> /lib/web/css/docs/source/_utilities.less).

— c.norin,

Spiegazione semplice o differenza tra entrambi:

_extend.lessè il modo di estendere / modificare gli stili dei temi principali, ad esempio sei contento del tuo tema principale Luma e vuoi solo cambiare gli stili dei pulsanti nel tuo tema personalizzato, tutto ciò che devi fare è creare un nuovo file _buttons_extend.lesssotto web/css/sourcenel tuo tema personalizzato e regola gli stili lì dentro. Registrare questo file aggiungendolo al _extend.lessfile all'interno della directory del tema.

Che cosa succede se si desidera estendere gli stili di un modulo, ad esempio un modulo di pagamento, bene è possibile creare un _extend.lessfile all'interno della cartella del modulo temi, ad esempio Magento_Checkout/web/css/source/_extend.lesse aggiungere / estendere lo stile del modulo lì dentro.

Ora, se ho aggiunto un _module.lessfile nella directory del mio modulo, Magento_Checkout/web/css/source/_module.lessintendo sovrascrivere lo stile dei miei temi principali per questo modulo, nel qual caso devo copiare ' _module.less' file dalla directory del modulo del mio tema principale e apportare modifiche a quel file, nel qual caso questo file sarà sostituisci del _module.lesstutto il file dei temi principali .

— DEVTYPE
fonte

Non parla mai di Luma come genitore.

— Ezequiel Alba,

Il _extends.lesscon una S alla fine all'interno del vuoto a tema, è un file dove hanno creato tutte le classi che possono essere estesi tramite LESSsuccessivamente all'interno del tema, senza la necessità di creare nuovi componenti o struttura modulare per le modifiche di stile. -> Per coloro che non mi credono: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less controlla il file.

Il _extend.lesssenza la S alla fine, è per quando sei soddisfatto al 99% di ciò che ha il tema principale e devi solo cambiare un paio di cose, cambiare un po 'di stile e il gioco è fatto.

A proposito di quest'ultimo, la mia opinione personale, non usarlo per il tuo sviluppo. Crea un gran casino in seguito. Mantieni la tua struttura modulare con _module.lessper ogni modulo che desideri personalizzare e otterrai un risultato migliore e un progetto sostenibile alla fine.

— Ezequiel Alba
fonte