Blog

Supporto SCSS con Webpack

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.

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Un fattore importante e spesso sottovalutato per avere successo nel campo del web development è la capacità di fare buone domande e sapere dove trovare aiuto all’occorrenza. Quando Google non bast…
Le tecnologie legate all’intelligenza artificiale stanno facendo progressi rapidi, suscitando al tempo stesso non poche congetture. Da scenari distopici in stile 2001: Odissea nello spazio, passando…
Il settore tech è appannaggio esclusivo della popolazione maschile? Questo preconcetto è abbastanza diffuso, ma come stanno davvero le cose? Oggigiorno il mondo tech, non solo in Italia, è in gran …

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.