In questo articolo ti voglio raccontare come aggiungere SASS/SCSS ad un progetto React che è stato creato con create-react-app. Se vuoi saperne di più su ReactJS prima di proseguire con questo articolo ti invito a leggere la guida per imparare ReactJS. Per proseguire con questo articolo su SASS/SCSS non è necessaria un’elevata conoscenza di React, né tanto meno del CSS. Ti farò vedere infatti come impostare il progetto e come creare il primo file “.scss”.
Come aggiungere SASS/SCSS ad un progetto React
Per prima cosa è necessario creare un progetto React con “create-react-app”. Ti ho già spiegato come si fa a questo indirizzo.
Dunque per aggiungere SASS/SCSS ad un progetto React creato con “create-react-app” devi seguire questi passaggi, incredibilmente rapidi.
Eject
E’ necessario fare l’eject del progetto visto che dobbiamo andare a modificare dei file utilizzati da webpack.
Per farlo ti è sufficiente posizionarti con il terminale nella root del tuo progetto e dunque lanciare il comando:
npm run eject
Installare SASS
A questo punto è necessario installare SASS. Sempre da terminale puoi eseguire:
npm install sass-loader node-sass --save-dev
Sei già a metà strada per aggiungere SASS/SCSS ad un progetto React!
Modificare la configurazione di WebPack
Dunque questa è la fase più delicata. Dopo che hai fatto l’eject è comparsa una cartella “config” nel tuo progetto. All’interno di questa cartella puoi trovare due file molto importanti e che dobbiamo modificare:
- webpack.config.dev.js
- webpack.config.prod.js
Partiamo con la modifica del primo file. Apri il file webpack.config.dev.js e trova il seguente codice:
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesnt support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
Subito dopo questo codice che definisce le regole riguardanti il CSS è necessario andare ad inserire le regole riguardanti SCSS e di conseguenza impostare il loader per SASS. Quindi incolla questo codice subito dopo quello appena visto:
{
test: /\.scss$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesnt support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('sass-loader'),
},
],
},
Come puoi vedere non è molto diverso dal blocco “css”. Anzi abbiamo cambiato la prima riga sostituendo a “css” la stringa “scss” ed abbiamo aggiunto in fondo il sass-loader. Il css-loader è ancora necessario perché una volta che il sass-loader avrà compilato il CSS sarà necessario per webpack andare a gestire correttamente il CSS generato.
Ormai hai capito come aggiungere SASS/SCSS ad un progetto React, ma manca ancora qualche step importante.
Dobbiamo modificare anche il file webpack.config.prod.js. Entra nel file e cerca il seguente codice (stai attento perché la configurazione di dev è differente da quella di prod):
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign({
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesnt support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
extractTextPluginOptions
)
),
// Note: this wont work without `new ExtractTextPlugin()` in `plugins`.
},
Dunque subito sotto incolla questo codice:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
Object.assign({
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesnt support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('sass-loader'),
},
],
},
extractTextPluginOptions
)
),
// Note: this wont work without `new ExtractTextPlugin()` in `plugins`.
},
Bene, la configurazione è conclusa e sei pronto per aggiungere SASS/SCSS ad un progetto React. Vediamo insieme come fare.
Il primo file SCSS
Crea una pagina, una Home, qualsiasi cosa che abbia un po’ di CSS. Se hai seguito la guida su React sai bene che puoi creare un componente React ed importare i file CSS necessari per quel componente (un esempio di componente preso da PD Games):
import React from "react";
import {Helmet} from "react-helmet";
import "./home.css";
export default class Home extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div className = "home-main content-calculated-height">
<Helmet>
<title>PD Games</title>
<meta name="description" content="Il portale di giochi ReactJS per mostrare le potenzialità di questa libreria unita a giochi di CSS"/>
<meta name="keywords" content="reactjs, games, reactjs game, react js, javascript games, giochi react, react, giochi reactjs, paolodellaguzzo.com" />
</Helmet>
<div className = "container-fluid header-padding">
<div className = "row">
<div className = "col-4 planet-column">
<div className = "planet"></div>
</div>
<div className = "col-4">
<h1 className = "home-title">
PD
<br/>
Games
</h1>
<span className = "home-title">By Paolo Dell'Aguzzo</span>
</div>
<div className = "col-4">
<div className = "asteroid"></div>
</div>
</div>
<div className = "row rocket-row">
<div className = "col-12">
<div className = "rocket"></div>
</div>
</div>
<div className = "row city-row">
<div className = "col-12">
<div className = "city"></div>
</div>
</div>
</div>
</div>
);
}
}
Al posto dell’import di “home.css” vai a modificare l’estensione in “home.scss”.
Apri dunque il tuo foglio di stile (il file css, nel mio caso “home.css”) e cambia l’estensione in “home.scss”.
Nel mio caso ho definito delle classi che utilizzano una “font-family” sempre uguale (contenuto di “home.scss”):
.home-main{
background:#42d4f4;
}
.home-title{
font-family:"3dumbregular", "fantasy", "monospace", "sans-serif";
font-size:13em;
color:white;
font-weight: bold;
}
span.home-title{
font-family:"3dumbregular", "fantasy", "monospace", "sans-serif";
font-size:2em;
color:white;
font-weight: bold;
}
a.home{
font-family:"3dumbregular", "fantasy", "monospace", "sans-serif";
}
Utilizzando sempre lo stesso font sarebbe bello non ripeterlo e scriverlo in una variabile. Per farlo puoi mettere in cima al file la dichiarazione di variabile oppure dichiarare un file contenente tutte le variabili globali del progetto.
Quindi crea un file nella root del tuo progetto chiamandolo “Globals.scss” ed inserisci al suo interno:
$basefont: "3dumbregular", "fantasy", "monospace", "sans-serif";
Dunque sempre nel file “home.scss” aperto prima andiamo ad importare “Globals.scss” ed a sostituire nella “font-family” la nostra variabile:
@import '../../../Globals.scss';
.home-main{
background:#42d4f4;
}
.home-title{
font-family:$basefont;
font-size:13em;
color:white;
font-weight: bold;
}
span.home-title{
font-family:$basefont;
font-size:2em;
color:white;
font-weight: bold;
}
a.home{
font-family:$basefont;
}
Fai attenzione a mettere il giusto percorso per importare “Globals.scss” (non è per forza uguale al mio!).
Conclusioni
Con “npm run start” fai partire il progetto ed assicurati che tutto si veda come ti aspetti senza problemi. In questa guida ovviamente non abbiamo la possibilità di affrontare tanti argomenti su cosa sia SASS e SCSS, ma ti lascio alcuni link utili:
- SASS guida ufficiale (per capire cosa vuol dire preprocessare e scoprire cosa puoi fare con SASS/SCSS)
- StackOverflow – Come impostare Sublime Text per la sintassi SASS/SCSS
- Guida per capire la differenza tra SASS e SCSS (trovi anche molto altro!)
Hai imparato come aggiungere SASS/SCSS ad un progetto React, magari potrebbe esserti utile un libro per creare delle pagine accattivanti:
- CSS Secrets: Better Solutions to everyday web design problems (di Lea Verou – libro che consiglio sempre!)
O magari anche un corso su Udemy:
Ti consiglio anche questi articoli per farti diventare più bravo con il Web Design:
- Web Design: Creare un design di successo parlando con il cliente
- UX: Perché la User Experience è importante
Se vuoi rimanere aggiornato sugli articoli del blog ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo ?
Per dubbi o domande non esitare a scrivermi nei commenti ?
Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).
