Using dart sass, Hugo and Netlify

support
1

Hi, I have recently migrated to sass dart and it worked.

I installed dart-sass-embedded and ran the command below.

 env PATH=$PATH:/Users/sass_embedded-beta6 go test -run TestSC  ./hugolib

The sass_embedded-beta6 (or beta7) folder above is what needs to be on the PATH (not the binary/script).

In HTML, this is the way I found for CSS to work for all browsers.


{{ $style := resources.Get "stylesheets/index.scss" | toCSS (dict "transpiler" "dartsass" "targetPath" "dist/css/main.css") | postCSS (dict "use" "autoprefixer") | minify | fingerprint "md5" }}

<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">

In the local environment everything works fine, but when I try to run the deploy on Netlify, I get an error that I don’t have dart sass installed. Does anyone have any configuration suggestions on how I can resolve this on Netlify?

You need dart-sass-embedded in your system $PATH.

Thank You

1 Like
2

I have no good answer for you (I think I have seen someone doing this, and they will chime in, I’m sure),

But I had a look, and even the NPM library currently requires an extra step to manually download the binary, if I understand the setup.

If we have some Netlify people in here (I will try to find them if they don’t respond); This binary is now out of beta and it would be great if you (and Cloudflare and friends) installed this as part of your build image – and allowed people to select a version via a DARTSASS_VERSION or something.

For reference:

2 Likes
3

See Add the Dart Sass Embedded binary · Issue #740 · netlify/build-image · GitHub

2 Likes
4

Hi, thank you for the reply and also for opening an issue on Netlify. I will wait for their answer and I hope we have a solution soon now that dart sass embedded is in stable version. :slight_smile:

1 Like
5

I got the following answer from the Cloudflare Pages team via Discord:

Your best solution to this in future will probably be something like Prebuilt Assets. With that, you’ll control the build process, image, etc. and can do whatever you want there, and then just ship the final artifacts over to Pages at the end.

However, they have no ETA for when this will be available.

As for Vercel, with whom I’ve also asked about this subject, I have yet to receive a response.

1 Like
6

For what it’s worth in this whole discussion, since we seem for now to be at mercy of the various Hugo-savvy hosting vendors where Embedded Dart Sass is concerned . . .

Using Dart Sass with Hugo • There’s no reason to wait for the good stuff • Until hosts allow Embedded Dart Sass in their build processes, here’s a not-too-hacky workaround for Sass-on-Hugo fans.

Also: a demo repo and its resulting demo microsite.

1 Like
7

See this repo for a workaround to use Dart Sass with Hugo on Netlify:

The above should be possible to adapt to “the others” (e.g. Vercel, Cloudflare)

Also see this issue to track the status of getting it into Netlify’s official build image:

1 Like
9

Very nice. For trying this with other vendors, am curious about where you found this for Netlify for inclusion in build.sh:

BIN_DIR=/opt/build/repo/node_modules/.bin

Edit: was able to get it to work in Vercel by using:

BIN_DIR=${pwd}/bin

However, similar efforts in Cloudflare Pages keep running into permissions errors. One discussion thread led me to believe that a build command of chmod +x build.sh && ./build.sh would solve that, but it hasn’t. This would suggest that, with CFP, the answer I quoted from them earlier in this thread is the operative one, unfortunately.

Edit #2: Thanks to an as-always-savvy @bep tip, was able to find a segment of the CFP path that allowed insertion, so this works: BIN_DIR=/opt/buildhome/.binrc/bin. I think I’ll leave it to the rest of you folks to figure out what other vendors do, but this covers the only three I ever use any more — CFP, Vercel, and Netlify.

Edit #3: OK, my curiosity overcame me and I tried it with Render, too. There, the operative line for making this work is:

BIN_DIR=/opt/render/project/src/.venv/bin

However… Render still doesn’t recognize a HUGO_VERSION environment variable, so it installs — as of this writing — Hugo 0.92.1 rather than accepting the 0.93.3 var setting I gave it. I asked Render to make that feature available, as with other hosts, nearly a year ago and they still haven’t implemented it.

2 Likes
10

Git/GitHub preserves the “chmod bits” so if you do the above before you commit it to Git you should be OK.

2 Likes
11

Yes, saw that in the same discussion thread I mentioned (quoted below). Thanks!

You can store the execute in git using git add --chmod=+x build.sh .

1 Like
12

Have now issued a “sequel” with the info learned here today, thanks to @bep …

2 Likes
13

Came up with a GitHub Actions-based workflow regarding this subject:

1 Like
14

For GitHub Actions you could also take inspiration from here:

2 Likes
15

Thanks! Definitely borrowed from your previous script in the GHAs I supplied.

2 Likes
16

Since I got responses indicating that people needed more information about the local installation of the Embedded Dart Sass binary, I added this today:

1 Like
17

And a further update perhaps of particular interest to those hosting on Vercel:

1 Like
18

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