25

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)

LostBalloon
  • 1,608
  • 3
  • 15
  • 31

2 Answers2

13

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 }}">
Kols
  • 3,641
  • 2
  • 34
  • 42
12

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/

Aaditya Maheshwari
  • 714
  • 1
  • 5
  • 16
  • 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. – LostBalloon Jan 06 '19 at 00:40
  • 1
    @LostBalloon Yes. By default. And theme configured pipeline too. But yes, usually under `assets/`. – Aaditya Maheshwari Jan 06 '19 at 00:42
  • 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` ? – LostBalloon Jan 06 '19 at 00:43
  • @LostBalloon Correct. Also, there is PostCSS: https://gohugo.io/hugo-pipes/postcss/ if need be. – Aaditya Maheshwari Jan 06 '19 at 00:46
  • 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. – Ben Visness Apr 02 '19 at 03:50