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

Un des intérêts de développer une application avec ReactJs est de n’avoir qu’un point d’entrée pour une application. Mais que faire quand votre application a besoin de styles particuliers. Nous allons voir comment ajouter simplement vos styles en css, less ou sass à votre application.
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"
}
]
},
...
Utile ! 😉