14 Juil Intégration du Postcss en React
Postcss est un outils de transformation du CSS en Javascript.
Alors, la première chose est d’installer Postcss dans notre projet
/* Vous pouvez utiliser Yarn ou npm */ yarn add postcss-preset-env npm install postcss-preset-env
Rendez vous sur cette url pour avoir la liste des Modules existants pour Postcss
Maintenant on va installer Gulp pour la transformation du css
npm install --global gulp
L’étape suivante est d’installer Gulp pour Postcss et Gulp rename pour le renommage des fichiers
npm i gulp-postcss npm i gulp-rename
Après qu’on a réussi à installer tout ça, on va créer maintenant un nouveau fichier sur la racine de notre projet
/* FICHIER : gulpfile.js */
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var rename = require('gulp-rename');
gulp.task('css', function(){
gulp.src('./public/assets/css/app.css')
.pipe(postcss([]))
.pipe(rename('bundle.css'))
.pipe(gulp.dest('./public/assets/css/'))
});
/*
CHEMIN DU FICHIER CSS
DANS public / assets / css /
Le fichier qu'on va le gérérer avec Gulp
DANS le même fichier et se nomme bundle.css
*/
Pour l’exécution du Gulp, il faut saisir cette ligne dans notre invite de commande:
/* css : est le nom du TASK dans notre fichier gulpfile.js */ gulp css