ReactJs - Ajouter du LESS, du SASS ou du CSS avec Webpack

Présentation

Webpack est un constructeur de modules qui permet de packager des applications Javascript et de créer des ressources statiques à partir de plusieurs modules JavaScript.

Il se charge donc de découvrir vos modules et toutes leurs dépendances, de les transformer (si nécessaire) en utilisant des loaders, puis de les packager dans des fichiers contenants la totalité du code prêt à être utilisé.

Nous verrons dans cet article comment configurer webpack pour importer les fichiers de style dans une application.

Choix des technologies

Dans le but de simplifier le développement, nous utiliserons des fichiers LESS au lieu de CSS car ils offrent une syntaxe plus agréable. De plus nous utiliserons le module autoprefixer qui se chargera du support des attributs dont le nom diffère sur les différents navigateurs, par exemple :

    display: -ms-flexbox;
    display: flex

Ajouter des modules

Nous aurons besoin des modules suivants :

Pour les installer avec npm :

$ npm install autoprefixer-loader css-loader less less-loader style-loader

Configurer de Webpack

Dans le fichier webpack.config.js, il suffit d’ajouter des loaders pour gérer les fichiers .less :

    ...
    module: {
        loaders: [
            ...
            {
                test: /\.less/,
                loader: "style-loader!css-loader!autoprefixer-loader!less-loader"
            }
        ]
    },
    ...

Cette configuration explique à webpack comment réagir s’il trouve une dépendance vers un fichier .less. Dans notre cas, il va donc :

transformer le LESS en CSS
ajouter les préfixes navigateurs
importer le style dans le code javascript

Lors de l’exécution, les loader sont appelé de droite à bauche, ce qui revient à faire l’opération suivante:
style-loader(css-loader(autoprefixer-loader(less-loader(file))))

Créer un fichier LESS

Vous pouvez maintenant définir les styles de votre application dans un fichier LESS. A titre d’exemple, nous allons ajouter au projet un fichier .less contenant :

#main-element {
	background-color: #F0F0F0;
	padding: 15px;

	.title {
		font-size: 25px;
		text-align: center;
	}
}

Ce qui correspond à la structure html :

<div id="main-element"> 
    <div class="title"> 
      Hello World ! 
    </div>
</div>

Importer du LESS dans les composants

Il s’agit simplement d’ajouter un nouvel import qui pointe vers le fichier .less dans le module qui en a besoin.

import "../styles/app.less"

Attention, les styles importés seront appliqués à la totalité du DOM de la page, pas uniquement au DOM du composant dans lequel nous l’importons. Veillez à bien choisir votre nomenclature de classe ou utilisez une classe parente unique (ou un id) à la racine de votre composant pour éviter les collisions.

Reprenons notre exemple:

import React from "react";
import "../styles/app.less"

class App extends React.Component {
    render() {
        return (
            <div id="main-element"> 
	            <div className="title"> 
	              Hello World ! 
	            </div>
            </div>
        )
    }
}

export default App;

Si tout c’est bien passé, voila le résultat :

Quid des amateurs de SASS ?

Si votre cœur penche vers SASS, ne vous en faites pas, tout est également géré, il vous suffit d’utiliser sass-loader à la place de less-loader

$ npm install sass-loader

Pour ce qui est de webpack.config.js :

    ...
    module: {
        loaders: [
            ...
            {
                test: /\.scss/,
                loader: "style-loader!css-loader!autoprefixer-loader!sass-loader"
            }
        ]
    },
    ...

Le CSS, pour moi, il n’y a que ça de vrai !

Si vous souhaitez vous contenter d’un fichier de style CSS classique, rien de plus simple, il vous suffit d’utiliser la configuration suivante :

    ...
    module: {
        loaders: [
            ...
            {
                test: /\.css$/,
                loader: "style-loader!css-loader!autoprefixer-loader"
            }
        ]
    },
    ...

ReactJs – Ajouter du LESS, du SASS ou du CSS avec Webpack