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)

Bromic

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/

Amena

Ok I see, Thanks, I'm actually running on v0.53 (installed using homebrew). I'm guessing it includes the support now as the compiler seemed to support those features. The release notes & the theme helped me understand what I was missing. I'm guessing the files will always have to be under the assets folder. – Bromic

@Bromic Yes. By default. And theme configured pipeline too. But yes, usually under assets/. – Amena

A quick question, I'm guessing that when the targetPath in the theme you use is set to 'css/file.css for example, it's for when it's compiled, ending up under /public/css/file.css ? – Bromic

@Bromic Correct. Also, there is PostCSS: gohugo.io/hugo-pipes/postcss if need be. – Amena

It looks like the extended build may be available through some package managers now. I was able to run choco install hugo-extended to get SCSS to work on Windows. – Clardy

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 }}">

Aleris

I just tried to use this today and the site would only load when 'fingerprint' is lowercase – Ingrain