Hugo permet nativement l’usage de SASS / SCSS, nous allons ici voir comment le mettre en place avec le thème Beautifulhugo, qui est utilisé sur ce site dans une version légèrement modifiée.

Vous devez utiliser Hugo dans sa version extended

Vous pouvez connaître votre version de Hugo avec la commande hugo version

Consultez à la documentation si nécessaire, et plus particulèrement cette partie pour l’installation sur Linux

Mise en place en local

  1. Première étape, créez un dossier assets à la racine de votre projet.
    Il est important que ce dossier s’appelle ainsi, en revanche les noms de fichiers et de dossiers qui viennent ci-dessous sont adaptables selon vos envies.

  2. Placez dans ce dossier un fichier en .scss, de préférence dans un sous-dossier dédié aux fichiers Sass. Nous allons dans cet exemple utiliser le fichier assets/scss/custom.scss. Vous pouvez y mettre quelques lignes de code pour le test.

  3. Créez un second fichier layouts/partials/head_custom.html depuis la racine de votre projet et insérez ces quelques lignes:

     {{ $styleSass := resources.Get "scss/custom.scss" }}
 {{ $styleCSS := $styleSass | resources.ToCSS }}
 <link rel="stylesheet" href="{{ $styleCSS.Permalink }}">

Voilà, c’est tout ! À chaque modification de votre fichier custom.scss, Hugo se charge de le retranscrire en CSS et de l’insérer dans la page.

Si vous faites un petit git status vous verrez que les fichiers CSS générés automatiquement sont placés dans le dossier resources, nous y reviendrons dans un instant.

Publication en ligne

Une fois que vous avez commité puis pushé les fichiers custom.scss et head_custom.html prenez le temps de jetez un œil aux Pipelines.

Si le build échoue, vous devriez avoir un message comme celui-ci:

Building sites …
ERROR 2021/01/26 00:16:13 error: failed to transform resource:
TOCSS: failed to transform "scss/custom.scss" (text/x-scss):
this feature is not available in your current Hugo version,see https://goo.gl/YMrWcn for more information

Cela signifie que votre hébergeur ou que votre configuration ne permettent pas d’utiliser Hugo version extended. Deux possibilités s’offrent à vous:

Si vous avez le bon goût d’utiliser Frama.io, vous pouvez mettre à jour votre configuration.

Si vous ne pouvez pas modifier cette configuration, il vous faut pusher le contenu du dossier resources à chaque modification de votre fichier .scss, sans quoi vos modifications n’apparaîtront pas en ligne.

Hugo fourni de nombreuses options complémentaires.

Consultez la documentation pour en savoir plus.

Ressources

Compatibilité avec Hugo basic, qui est peut-être la partie la plus complexe à appréhender: