Error building site: TOCSS-Dart

support
1

Hi!

I’m new to Hugo and looking to develop a site from scratch (not using a prebuilt theme) to learn the ins and outs of Hugo. However, I’ve already hit a hurdle. I read that Hugo is using libsass but of course this is now outdated so was looking to set up dartsass going forward. I’ve added a sass folder with main.scss to the assets folder. The following code has been added to my head

 {{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }}
    {{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{ end }}

Running Hugo server produced the following error:
Error: error building site: TOCSS-DART: failed to transform “sass/main.scss” (text/x-scss): got unexpected EOF when executing “sass”. The user running hugo must have read and execute permissions on this program. With execute permissions only, this error is thrown.

I’ve checked my permissions -rwxr-xr-x 1 xxxxx staff 418 Oct 26 1985 …/lib/node_modules/sass/sass.js and there correct it seems.

Any help would be appreciated, really want to get going with Hugo but this is currently putting me off.

2

Are you able to view Dart Sass by hugo env ?

3

Hi @panchtatvam

I get the following

hugo v0.122.0-b9a03bd59d5f71a529acb3e33f995e0ef332b3aa+extended darwin/amd64 BuildDate=2024-01-26T15:54:24Z VendorInfo=brew
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.21.6"
sass --embedded is unavailable in pure JS mode.
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.3.2
4

Dart Sass should have been a listed transpiler . What method did you use for Dart Sass installation ?
It seems Hugo is unable to find Dart Sass.

5

The error message refers to a program, not to a .js file. See the dartsass intro:

OTOH, if you’re not using all of SASS’s features, perhaps CSS is sufficient?

6

Installed dart ages ago.

Would have been one of these 2 methods

npm install -g sass

or

brew install sass/sass/sass
7

You could try re-installing Dart Sass and check again with Hugo. Should be a minor integration issue. Hugo should be able to show Dart Sass as an active transpiler when running hugo env

8

There’s a detailed description available here:

(found that using the forum search …)

9

Thanks @chrillek

This is the same information thats in the Hugo docs.

Just cant figure out why Hugo cant see my Dart Sass PATH. Maybe I will consider using vanilla css, will miss @mixins though

10

There’s also this

You might also want to check permissions on the sass binary (not sass.js).

11

My which sass points to /Users/XXXX/.nvm/versions/node/v12.21.0/bin/sass

Which I believe is correct.

Ill keep playing with this when I get some time and see if I can resolve.

12

The line above from the hugo env output points to the problem.

Solution

Install Dart Sass using one of the methods described here:
https://gohugo.io/functions/resources/tocss/#dart-sass

To verify installation and path precedence:

sass --embedded --version

You should see something like:

{
  "protocolVersion": "2.4.0",
  "compilerVersion": "1.70.0",
  "implementationVersion": "1.70.0",
  "implementationName": "dart-sass",
  "id": 0
}

When you run hugo env you should see something like:

hugo v0.123.0-DEV-4d98b0ed6a8aa4219fcc089228446cc480b31862+extended linux/amd64 BuildDate=2024-01-31T12:43:46Z
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.21.6"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.3.2"
github.com/sass/dart-sass/protocol="2.4.0"
github.com/sass/dart-sass/compiler="1.70.0"
github.com/sass/dart-sass/implementation="1.70.0"

Explanation…

When Hugo transpiles Sass to CSS it “shells out” to Dart Sass using the Embedded Sass Protocol via the --embedded CLI flag for the Dart Sass executable.

The Node.js Dart Sass implementation specifically excludes this capability, which is why this installation method is not listed in the Hugo documentation referenced above.

1 Like
13

Amazing, thanks so much @jmooring. It’s got dart-sass working. :+1:

1 Like
14

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.