How to setup SCSS with Hugo

Question

I'm pretty new with Hugo and am struggling a bit with the documentation as it feels pretty fragmented with incomplete examples.

I've created a new site hugo new site site-name along with a new theme hugo new theme theme-name.

In the documentation page for SASS/SCSS there's the following example:

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

Not sure where that's supposed to go, how the whole pipeline works. Also, this seems to be specifically looking for files under an assets folder even though the theme is created with a static/css folder. Most examples I find on the web are all old setups using gulp to compile before the support being added to hugo (from my understanding)

Answer 1

You can use hugo's extended (like https://github.com/gohugoio/hugo/releases/download/v0.53/hugo_extended_0.53_Windows-64bit.zip) version which automatically compiles SCSS to CSS for you. You can then customize all the setup. If you don't want to/aren't using the extended version, then ofc you will have to go old school with a watcher like ruby SASS or Gulp, etc.

Also please refer: https://gohugo.io/news/0.43-relnotes/ , see Notes. "Hugo is now released with two binary version: One with and one without SCSS/SASS support. At the time of writing, this is only available in the binaries on the GitHub release page. Brew, Snap builds etc. will come. But note that you only need the extended version if you want to edit SCSS. For your CI server, or if you don’t use SCSS, you will most likely want the non-extended version."

I personally use the extended version; that too with Gitlab CI without any issues. I always write/edit SCSS; run hugo and it does the rest. You also have to make sure your theme supports/plays well with it. Theme I use (supports SCSS): https://github.com/luizdepra/hugo-coder/

Answer 2

Not sure where that's supposed to go, how the whole pipeline works

That code is supposed to go inside HTML specifically where you normally add CSS. The $styles variable in the code will contain the location of the processed CSS file along with other details if any.

---

Here are the steps to set up your SCSS pipeline in Hugo,

1. Create your scss somewhere within your assets directory. The default asset directory is /assets. Ex: /assets/sass/main.scss
2. Go to your base HTML layout or any other partial section where you'll import your CSS files normally and add the code in the pipeline documentation there. The URL next to resources.Get is relative to the assets directory defined in your configuration file. In my case it is like the following,

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">