Compilazione dei less in css con Grunt su Magento 2

Reading Time: 2 minutesAggiungi ai preferiti

Con questo articolo vediamo come funziona la compilazione dei file less in file css, con Grunt, su Magento 2.

Nella struttura del template di Magento 2 non troviamo i classici file css, ma i file .less, che vanno compilati affinchè diventino dei file css.

`It’s CSS, with just a little more.`

I file less consentono di scrivere fogli di stile con una sintassi simile a quella dei linguaggi di programmazione e, quindi, facilitano il lavoro dello sviluppatore.

Scritto il file less del nostro tema grafico va creato il file css che sarà letto dal browser.

Vediamo quindi come funziona la compilazione dei file less perchè diventino dei file css su Magento 2.

Per fare questo possiamo usare Grunt, un tool javascript creato per l’automazione di operazioni ripetitive.

Non credo ci sia dubbio che, in fase di sviluppo di un nuovo progetto e-commerce con Magento 2, la compilazione dei file less in css sia un’operazione ripetitiva.

Grunt è quindi, dico sicuramente, lo strumento che può aiutarci a risparmiare tempo nel nostro lavoro, vediamo quindi quali sono i passi principali per poterlo utilizzare.

Perchè Grunt funzioni con il nostro tema in Magento 2, dobbiamo impostarne un file di configurazione.

Innanzitutto copiamo il file dev/tools/grunt/configs/themes.js in dev/tools/grunt/configs/local-themes.js

cp dev/tools/grunt/configs/themes.js dev/tools/grunt/configs/local-themes.js

Quindi inseriamo all’interno di module.exports = {} del file local-themes.js la nostra configurazione

<theme>: {
  area: '<area>',
  name: '<Vendor>/<theme>,
  locale: '<language>',
  files: [
    '<path_to_file1>', //path to root source file
    '<path_to_file2>'
  ],
dsl: 'less'
}

Riporto come esempio la mia configurazione

module_exports = {

mio_tema:{
        area: 'frontend',
        name: 'Ws/mio_tema',
        locale: 'it_IT',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

}

Modificati i file less del tema, questi sono i comandi utili per generare i file css definiti nel file di configurazione.

Usiamo il comando

Grunt clean:<theme>

per la cancellazione dei file statici precedentemente generati nella directory pub/static/frontend/<Vendor>/<theme>/<locale>/

Usiamo invece il comando

Grunt exec:<theme>

per eseguire il rendering dei file sotto forma di collegamenti simbolici.

Usiamo invece il comando

Grunt less:<theme>

per convertire i file css utilizzando i link simbolici.

Pate delle informazioni le ritrovate nella documentazione ufficiale di Magento 2 (clicca qui).