Nota 1: ciò presupporrà sempre che si stia estendendo magento-blank.
Nota 2: <theme-dir>èapp/design/frontend/Vendor/theme/
Nozioni di base: modifica delle variabili di base
(per tl; dr, salta alla conclusione)
La maggior parte delle guide che ho trovato riguardano solo questo passaggio dei temi con MENO, quindi cercherò di mantenerlo breve. Magento 2 ha un set di base di variabili che definiscono gli aspetti comunemente usati di un tema. Colori, caratteri, stile dei titoli delle pagine e così via sono definiti in queste variabili.
In <magento-root>/lib/web/css/source/lib/variables/troverai un numero di file MENO intuitivamente denominati. In ognuno di questi puoi trovare i valori assegnati alle variabili per molti degli elementi comuni in Magento 2.
Per modificare una di queste variabili, è sufficiente creare un file in <theme-dir>/web/css/source/_theme.less.
Esempio:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
Tecnicamente, puoi inserire qualsiasi CSS o MENO qui e si applicherà correttamente al tuo sito (ma non farlo). Spiegherò come funziona in un momento.
Aggiunta di un nuovo file CSS
È possibile aggiungere nuovi CSS all'inizio di tutte le pagine dei modelli.
Creare <theme-dir>/Magento_Theme/layout/default_head_blocks.xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/myStyle.css" />
</head>
</page>
E poi crei un file con il tuo nuovo CSS o MENO:
<theme-dir>/web/css/myStyle.less. Puoi scrivere MENO o CSS qui.
Sostituzione di stili esistenti
Ho scoperto che Magento 2 LESS non può essere facilmente sostituito semplicemente aggiungendo un nuovo file CSS. Ed è qui che ho iniziato a perdersi e spiegherò come Magento 2 trova i suoi file MENO.
Per impostazione predefinita, Magento 2 includerà (e alla fine tornerà a) questi file:
<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles
Questi file includono (importano) altri file LESS, che spesso includono ancora più file LESS. Ed è qui che altre guide sono diventate inutili per me e spiegherò ciò che ho trovato, nel miglior modo possibile.
La fonte / lib Magic
In styles-m.less, c'è la linea: @import 'source/lib/_responsive.less';. Noterai che non vi è alcuna source/libdirectory nel magento-blanktema. È evidente che gli stili di Magento 2 alla fine tornano a <magento-root>/lib/web/css/. È lì che trovi source/lib/_responsive.less.
Le variabili utilizzate _theme.lesssono disponibili a causa di un source/libfile importato nel magento-blanktema. Nota: _theme.less è un file vuoto nei temi predefiniti. Continua a leggere per scoprire perché questo è importante notare.
File MENO "Incluso automaticamente"
Alcune guide che ho trovato hanno insistito sul fatto che puoi creare <theme-dir>/web/css/_styles.lessperché Magento cerca e include automaticamente quel file. Ho trovato che questo è un cattivo consiglio.
Se crei <theme-dir>/web/css/_styles.less, il tuo sito verrà interrotto. theme-frontend-blank/web/css/styles-m.lessimport _styles.less, che a sua volta importa altri 3 file .less, ciascuno dei quali importa ancora più file .less.
Se crei un _styles.less, lo stai sovrascrivendo. Sovrascrivendo _styles.less, si sovrascrivono tutti i file importati, tutti i file importati da tali file e così via.
Nota _theme.less: questo file è vuoto nei temi predefiniti, quindi è sicuro creare e iniziare ad aggiungere semplicemente se si sta basando il tema su un valore predefinito. Tuttavia, se si sta estendendo un tema che estende già un valore predefinito, sono_theme.lessgià utilizzate delle possibilità. La creazione di nuovo lo sovrascriverà.
Il magico @magento_import
In styles-m.lessvedrai un paio di righe commentate:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
Queste righe in realtà non sono state commentate! Magento 2 ha una gestione speciale per le linee che iniziano con //@magento_import. Queste righe possono essere incluse solo nei file su <theme-dir>/web/css.
Le righe sopra indicano a Magento 2 di includere qualsiasi file all'interno del tema che segue il modello dato. Quindi le righe sopra includeranno automaticamente:
'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';
'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';
'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on
L'aggiunta di nomi di file _widgets.lesse _module.less verrà trovata e inclusa automaticamente, anche se si tratta di un nuovo modulo o di un modulo che non ha già quel file.
Ricorda che Magento-Blank include quei file per la maggior parte dei moduli e se desideri utilizzare questo metodo, dovrai copiare e incollare gli originali (a meno che non stia eseguendo una riscrittura completa).
Conclusione
(Leggi: non usare _styles.less).
Quando stai cercando di cambiare il CSS di un elemento, vuoi fare del tuo meglio per trovare in quale file è definito lo stile. A volte tutto ciò che devi fare è cambiare una variabile _theme.less. La maggior parte delle volte, sospetto, dovrai semplicemente copiare e incollare il tema _module.lesso _widgets.lessnel tuo tema e apportare le modifiche.
Se hai creato un nuovo modulo o hai nuovi elementi HTML, potrebbe essere necessario creare un file LESS e includerlo separatamente in <head>ogni pagina.
In casi complicati, potrebbe essere necessario creare un nuovo @importo @magento_import. Vuoi trovare il figlio più basso che ha senso per quello che stai facendo, quindi non stai incollando un mucchio di file non necessari o aggiungendo confusione@import linee che sembrano portare da nessuna parte.