Pour ceux qui sont passés à coté de l’utilisation du SCSS, sachez que cette techno vous permet de rajouter des variables, et même des boucles dans vos fichiers de styles CSS. L’utilisation de cette technologie et d’autres (comme Less ou Stylus) est natives dans Laravel. Voyons ensemble comment l’utiliser.
Ne supprimer pas l’appel de app.css, et app.js !
Lorsqu’on démarre un site sous Laravel, il peut être tentant de nettoyer le fichier template et de lui retirer les lignes suivantes :
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
<script src="{{ asset('js/app.js') }}" ></script>A quoi bon conserver des fichiers dont on n’a pas besoin, ça soulagera les performances…
Et bien, c’est une erreur !
Ces 2 fichiers sont utilisés par Laravel-mix (lorsque vous faites un npm run prod) et sont censés stocker l’intégralité de vos fichiers css, et js.
Pour rappel cette commande permet de minifier le code des ressources et de les concaténer. Vous pouvez lui adjoindre différents paramètres supplémentaires pour automatiser d’autres tâches lors du déploiement de votre application. Pour en savoir plus, je vous renvoie vers un ancien article.
Utiliser SCSS dans Laravel:
Si vous avez bien installé votre site Laravel, vous devriez avoir dans ressources\assets\sass, 2 fichiers nommés app.scss et _variables.scss.
Dans variables, vous pouvez lui indiquer les variables de couleurs à réutiliser sous cette forme: $body-bg: #1f334b;
Dans app.scss, vous devez lui ajouter votre feuille de styles.
Vous pourrez ainsi avec des éléments sous cette forme:
body a{
color:$body-bg;
}
Ici, les liens de la page prendront la couleur définit plus haut.
Que fait Laravel Mix ?
Lorsque vous analysez le fichier à la racine nommé webpack.mix.js, vous verrez ces lignes: mix.js(‘resources/assets/js/app.js’, ‘public/js’)
.sass(‘resources/assets/sass/app.scss’, ‘public/css’);
Celles ci indiquent de compiler (en gros, créér une copie) du fichier resources/assets/js/app.js dans public/js/app.js, et de faire la même chose pour resources/assets/sass/app.scss dans public/css/app.css.
C’est dans ce fichier que vous devrez ajouter vos tâches d’optimisation si vous voulez vous y mettre.
La phase de build:
Il va falloir prendre le pli, mais vous devez avoir en permanence sur votre poste, un invité de commande avec un npm run watch qui tourne. Cette commande permet de détecter les changements effectués dans les fichiers vus plus haut, et de reconstruire les fichiers finaux css dont votre application aura besoin.
Conclusion:
C’est vrai qu’avoir un fichier css de base qui ne nécessite pas d’avoir node js d’installé parait plus simple. Mais, d’après mon expérience, ne faites pas ce choix. Vous vous briderez technologiquement parlant. Il faut savoir que les projets d’aujourd’hui font de plus en plus appel à des couches de javascript, et passent par des phases de build. Ne pas en prendre connaissance dès maintenant, revient à se tirer une balle dans le pied… Et une fois de plus Laravel, nous facilite vraiment la vie sur ce terrain.
