web-dev-qa-db-fra.com

Comment configurer SCSS avec Hugo

Je suis assez nouveau avec Hugo et je me bats un peu avec la documentation car elle semble assez fragmentée avec des exemples incomplets.

J'ai créé un nouveau site hugo new site site-name avec un nouveau thème hugo new theme theme-name.

Dans la page de documentation pour SASS/SCSS il y a l'exemple suivant:

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}

Je ne sais pas où cela est censé aller, comment fonctionne l'ensemble du pipeline. En outre, cela semble rechercher spécifiquement des fichiers dans un dossier assets même si le thème est créé avec un static/css dossier. La plupart des exemples que je trouve sur le Web sont toutes des anciennes configurations utilisant gulp pour compiler avant que le support ne soit ajouté à hugo (d'après ma compréhension)

10
LostBalloon

Vous pouvez utiliser la version étendue (comme https://github.com/gohugoio/hugo/releases/download/v0.53/hugo_extended_0.53_Windows-64bit.Zip ) de hugo qui compile automatiquement SCSS en CSS pour tu. Vous pouvez ensuite personnaliser toute la configuration. Si vous ne voulez pas/n'utilisez pas la version étendue, alors vous devrez souvent aller à l'ancienne avec un observateur comme Ruby SASS ou Gulp, etc.

Veuillez également vous référer: https://gohugo.io/news/0.43-relnotes/ , voir Notes. "Hugo est maintenant publié avec deux versions binaires: une avec et une sans prise en charge SCSS/SASS. Au moment de la rédaction, cela n'est disponible que dans les binaires sur la page de sortie de GitHub. Les versions Brew, Snap etc. viendront. Mais notez que vous n'avez besoin de la version étendue que si vous souhaitez modifier SCSS. Pour votre serveur CI, ou si vous n'utilisez pas SCSS, vous voudrez probablement la version non étendue. "

J'utilise personnellement la version étendue; cela aussi avec Gitlab CI sans aucun problème. J'écris/édite toujours SCSS; exécutez hugo et il fait le reste. Vous devez également vous assurer que votre thème prend en charge/joue bien avec lui. Thème que j'utilise (prend en charge SCSS): https://github.com/luizdepra/hugo-coder/

3
Aaditya Maheshwari