Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Giu 07
aggiungere SASS/SCSS ad un progetto React

ReactJS: Come aggiungere SASS/SCSS ad un progetto React

  • 07/06/2018
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • css, css preprocessing, react, reactjs, sass, scss

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:

Development Category (English)728x90

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:

Deep Learning Specialization on Coursera
{
    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:

  • The Complete SASS & SCSS Course: From Beginner to Advanced

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!).

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • Strumenti per Web Designer15/11/2017
  • CSS Animation e Keyframes25/10/2017
  • CSS: Cos’è la Specificity?23/10/2017
  • Imparare a Creare un Sito Web19/10/2017

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku