Supporto SCSS con Webpack

Supporto SCSS con Webpack

Giuseppe Speranza Di Giuseppe Speranza


webpack scss bootstrap

Ricordo che la repository di tutto quello sviluppato potete trovarla 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. 

Se non ricordi bene cos’è un Loader ti consiglio 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-loader, il loro utilizzo lo potete vedere 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. Segno che Webpack riesce a leggere correttamente la nuova estensione.

Ora facciamo un esempio più concreto, installiamo bootstrap 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 avevate il dev-server avviato, dovrebbe aver compilato automaticamente le nuove modifiche, altrimenti vi basta avviare una nuova build con npm run build.

Vi accorgerete che Webpack ha correttamente importato bootstrap, ispezionando il tag style nell’head del browser, come mostro qui di seguito:

Webpack e Bootstrap

Webpack ha inserito tutto il codice sorgente di Bootstrap in quel tag style. Infatti da questo momento è 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 del Frontend. Conoscere le basi, sapere come lavorano i task che usiamo con così tanta facilità con i più famosi framework in circolazione, può solo migliorarci come sviluppatori e darci una visione d'insieme più completa.

noltre, 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 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 e saper dove mettere le mani. Quindi conoscere tutto ciò che è alla base è un punto di partenza essenziale.

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

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo