How to disable libsass and enable dart sass once installed?

support
1

The Problem

Check your Hugo installation; you need the extended version to build SCSS/SASS with transpiler set to ‘libsass’.: this feature is not available in your current Hugo version, see Frequently asked questions | Hugo for more information

I don’t want to use libsass. I want to use dartsass.

I found documentation explaining that libsass is the default, but I can’t find an example config showing what config.toml should look like to enable sass.

I was expecting it would be something like this, but none of these work:

transpiler = "dartsass"

[resources.ToCSS]
transpiler = "dartsass"

toCSS = "dartsass"

I’m also expecting that this should actually be a global option, not a per-project option but again, I’m very unclear as to what the key/value pairs are supposed to be and what config file they’re supposed to go in.

I’m not trying to write a module, I’m just trying to get a theme’s sample project to compile.

What I’ve done

I’ve installed the latest hugo and dart sass:

curl https://webi.sh/hugo | sh
curl https://webi.sh/sass | sh

I’ve verified that they’re in my path:

command -v hugo
/home/app/.local/bin/sass

command -v sass
/home/app/.local/bin/sass

I’ve read Using the Dart Sass transpiler, however, this only tells me how to install sass in cloud environments, not how to configure hugo to use it.

2

The topic that you linked to has the following sections:

The example section contains an example of how to use it.

I trust that your installation method gives you this when you run hugo env:

hugo v0.118.2-da7983ac4b94d97d776d7c2405040de97e95c03d+extended linux/amd64 BuildDate=2023-08-31T11:23:51Z VendorInfo=gohugoio
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.20.1"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.2.4"
github.com/sass/dart-sass/protocol="2.1.0"
github.com/sass/dart-sass/compiler="1.67.0"
github.com/sass/dart-sass/implementation="1.67.0"

Not to put too sharp on edge on it, but guessing is rarely a great strategy. If you would prefer to handle the transpiler option in your site configuration, create a custom parameter:

[params.sass]
transpiler = 'dartsass'

And then use that in your template instead of hardcoding the value.

Finally, the topic you linked to is no longer the canonical source of documentation, as noted at the top of the topic. See https://gohugo.io/hugo-pipes/transpile-sass-to-css/#dart-sass instead.

3

So what I’m getting is:

dartsass is a developer-only option. There is no way for a user to choose it.

The developer who created the theme would have to create a specific config to enable it. As a person trying to host a blog, I can’t “turn it on” - I just have to have the hugo-extended binary or edit the theme, or pick a different theme.

Is that correct?

4

Sorry, I’m not sure I understand your question.

If the theme uses Sass that is incompatible with the LibSass transpiler, it needs to be transpiled with Dart Sass.

If the theme uses Sass that is compatible with both LibSass and Dart Sass[1], and the theme template containing the transpilation code does not specify which transpiler to use (or if explicity specifies libsass), you can override that particular template and set the transpiler yourself.

Using the Dart Sass transpiler does not require the extended edition of Hugo, but in my view, if possible on your os/arch, you should be using the extended version anyway to enable WebP encoding.

  1. LibSass-compatible Sass is not always forwards compatible with Dart Sass, and Sass compatible with Dart Sass is not always backwards compatible. ↩︎