Prima di iniziare questo articolo, una piccola premessa: ricordiamo che puoi trovare la repository di quanto sviluppato al seguente link. Inoltre, i branch saranno numerati in base alla lezione. Il branch relativo a quest’articolo è webpack course 008.

Puoi switchare nel branch relativo a quest’articolo con il comando: git checkout webpack_course_008

In quest’ultimo articolo andremo a vedere come configurare la nostra applicazione per poter finalmente scrivere codice SCSS e sfruttare al meglio tutte le sue funzionalità.

Come scrivere codice SCSS

Anche in questo caso abbiamo bisogno di installare alcuni pacchetti NPM e modificare il webpack.config, aggiungendo un Loader appropriato per i file SCSS. 

PS! Se non ricordi bene cos’è un Loader ti consigliamo di rileggere l’articolo numero 3 di questa serie su Webpack Loader.

In precedenza, abbiamo già installato dei Loader per la gestione dei fogli di stile, rispettivamente il css-loader e lo style-loade : puoi osservare il loro utilizzo in questo punto all’interno del webpack.config.

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

Per poter usare l’SCSS bisogna installare il sass-loader e sass, come indicato nella documentazione. La procedura è sempre la medesima, si parte installandoli da linea di comando:

npm install --save-dev sass sass-loader

Dopodichè bisognerà modificare il Loader precedentemente creato per supportare i file CSS in questo modo:

{
  test: /\.s[ac]ss$/i,
  use: [
    // crea il tag 'style nel DOM in cui iniziare il codice
    'style-loader',
    // Converte il codice css in moduo commonJs per poterlo importare
    'css-loader',
    // Compila codice Sass in css
    'sass-loader'
  ] 
}

È importante ricordare sempre che il primo Loader ad essere eseguito è il sass-loader, per poi salire.

Come verificare il supporto al SCSS

Un primo test per la corretta verifica del supporto al SCSS è rinominare il file style.css in style.scss e aggiornare anche il suo import nell’index.ts:

Aggiornamento dell’import

import './style.scss'; // --> import del file scss

Ora, riavviando il dev-server o facendo partire una nuova build, tutto fila liscio: è il segno che Webpack riesce a leggere correttamente la nuova estensione.

Facciamo, adesso, un esempio più concreto: installiamo bootstrap framework e proviamo ad importarlo tramite Webpack nel file style.scss

Sempre da linea di comando:

npm install --save-dev bootstrap

Attendiamo e, non appena terminata, importiamo bootstrap come fatto di seguito, a riga 1 del style.scss:

// style.css
@import '~bootstrap/scss/bootstrap';

Se avevi il dev-server avviato, dovrebbe aver compilato automaticamente le nuove modifiche, altrimenti ti basterà avviare una nuova build con npm run build.

Noterai subito che Webpack ha correttamente importato bootstrap, ispezionando il tag style nell’head del browser, come mostrato qui di seguito:

Webpack e Bootstrap

Webpack ha inserito tutto il codice sorgente di Bootstrap in quel tag style. Infatti, da questo momento in poi, è possibile sfruttare tutte le classi di bootstrap, ad esempio aggiungendo la classe bg-warning, di bootstrap, al nostro container padre, in questo modo:

element.classList.add('bg-warning');

il risultato sarà il seguente:

Conclusioni finali

Siamo giunti al termine di questa serie su Webpack. Sicuramente uno degli argomenti più interessanti e più ostici di tutto il panorama dello sviluppo front end. Conoscere le basi, sapere come lavorano i tool che si utilizzano con così tanta facilità con i più famosi framework in circolazione, può solo migliorarti come sviluppatore web e darti una visione d'insieme più completa.

Inoltre, in applicazioni molto grosse, spesso, non è sufficiente la configurazione standard di webpack; può capitare di dover metter mani, migliorare o aggiungere alcune funzionalità anche a basso livello durante la fase di build. 

Il primo passo per essere sviluppatori web consapevoli di quello che si fa è conoscere cosa c’è sotto gli strumenti che utilizziamo. 

Non basta saper usare un framework per potersi ritenere sviluppatori consapevoli, occorre anche saper fare delle scelte opportune in base al compito specifico da attuare. Quindi, conoscere tutto ciò che è alla base è un punto di partenza essenziale.

Speriamo che questa mini serie abbia chiarito alcuni aspetti fondamentali di questo fantastico strumento.