# Using dart sass, Hugo and Netlify

**URL:** <https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099>\
**Category:** support\
**Created:** [February 11, 2022, 12:30pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099 "2022-02-11T12:30:20Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![evyperez](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/evyperez/32/6793_2.png) [@evyperez](https://discourse.gohugo.io/u/evyperez)\
**Post date:** [February 11, 2022, 12:30pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/1 "2022-02-11T12:30:20Z")

</div>

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

I installed [dart-sass-embedded](https://github.com/sass/dart-sass-embedded/releases) and ran the command below.

```auto
 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.

```auto

{{ $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?

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

```

Thank You

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 11, 2022, 6:34pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/2 "2022-02-11T18:34:24Z")

</div>

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:

> **[Release sass\_embedded 1.49.7 · sass/dart-sass-embedded](https://github.com/sass/dart-sass-embedded/releases/tag/1.49.7)**
>
> Embedded Sass
> 
> 
> First stable release the sass-embedded npm package that contains the Node.js Embedded Host.
> 
> 
> First stable release of the sass\_embedded pub package that contains the Embedded Da...

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 11, 2022, 7:53pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/3 "2022-02-11T19:53:09Z")

</div>

See [Add the Dart Sass Embedded binary · Issue #740 · netlify/build-image · GitHub](https://github.com/netlify/build-image/issues/740)

---

<div class="post-metadata">

**Author:** ![evyperez](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/evyperez/32/6793_2.png) [@evyperez](https://discourse.gohugo.io/u/evyperez)\
**Post date:** [February 13, 2022, 11:32pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/4 "2022-02-13T23:32:51Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [March 6, 2022, 8:26pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/5 "2022-03-06T20:26:05Z")

</div>

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](https://github.com/vercel/vercel/discussions/7514) about this subject, I have yet to receive a response.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [March 8, 2022, 5:39pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/6 "2022-03-08T17:39:30Z")

</div>

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](https://www.brycewray.com/posts/2022/03/using-dart-sass-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](https://github.com/brycewray/hugo-npm-sass) and its resulting [demo microsite](https://hugo-npm-sass.vercel.app/).

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 9, 2022, 9:15am UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/7 "2022-03-09T09:15:17Z")

</div>

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

> **[GitHub - bep/hugo-dartsass-testrepo: Just a test repo to test...](https://github.com/bep/hugo-dartsass-testrepo)**
>
> Just a test repo to test Hugo/Netlify/DartSass integration. - GitHub - bep/hugo-dartsass-testrepo: Just a test repo to test Hugo/Netlify/DartSass integration.

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:

> <https://github.com/bep/hugo-dartsass-testrepo/issues/1>
>
> Open this as a tracking issue.
> 
> Note that this project works as it is now on N…etlify, and should be possible to port to the others (e.g. Vercel, Cloudflare) with some adaptations.
> 
> The gist of it is in the build script:
> 
> https://github.com/bep/hugo-dartsass-testrepo/blob/main/build.sh
> 
> I will see if I can find time to get this into Netlify's build image/binrc (I tried this morning, but failed miserably :-))
> 
> See https://github.com/netlify/build-image/issues/740

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 9, 2022, 9:15am UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/8 "2022-03-09T09:15:28Z")

</div>



---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [March 9, 2022, 4:04pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/9 "2022-03-09T16:04:24Z")

</div>

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

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

```

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

```bash
BIN_DIR=${pwd}/bin

```

However, similar efforts in Cloudflare Pages keep running into permissions errors. One [discussion thread](https://community.cloudflare.com/t/permission-denied-on-build-script/295840/4) 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:

```bash
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](https://feedback.render.com/features/p/specify-hugo-version) and they still haven’t implemented it.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 9, 2022, 6:27pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/10 "2022-03-09T18:27:22Z")

</div>

> [@bwintx](#):
>
> that a build command of `chmod +x build.sh && ./build.sh`

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

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [March 9, 2022, 6:29pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/11 "2022-03-09T18:29:04Z")

</div>

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` .

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [March 9, 2022, 11:59pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/12 "2022-03-09T23:59:48Z")

</div>

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

> **[Using Dart Sass with Hugo—the sequel | BryceWray.com](https://www.brycewray.com/posts/2022/03/using-dart-sass-hugo-sequel/)**
>
> Hugo’s chief developer comes up with a way to get Embedded Dart Sass on the host, after all.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [May 17, 2022, 7:59pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/13 "2022-05-17T19:59:00Z")

</div>

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

> **[Using Dart Sass with Hugo: the GitHub Actions edition |...](https://www.brycewray.com/posts/2022/05/using-dart-sass-hugo-github-actions-edition/)**
>
> Still more ways to make Hugo and Embedded Dart Sass work together.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [May 17, 2022, 8:16pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/14 "2022-05-17T20:16:13Z")

</div>

For GitHub Actions you could also take inspiration from here:

> <https://github.com/gohugoio/hugo/blob/3a8189ee9353bd948207b62784b66fbe72b9e017/.github/workflows/test.yml#L55>

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [May 17, 2022, 8:21pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/15 "2022-05-17T20:21:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [May 22, 2022, 3:40pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/16 "2022-05-22T15:40:38Z")

</div>

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

> **[Using Dart Sass with Hugo: the nitty-gritty | BryceWray.com](https://www.brycewray.com/posts/2022/05/using-dart-sass-hugo-nitty-gritty/)**
>
> We go under the hood with the installation process for the Embedded Dart Sass binary.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [July 5, 2022, 3:09pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/17 "2022-07-05T15:09:17Z")

</div>

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

> **[Using Dart Sass with Hugo: some data on using GitHub Actions |...](https://www.brycewray.com/posts/2022/07/using-dart-sass-hugo-some-data-using-github-actions/)**
>
> After encountering some surprising results with my GHA-based method, I decided to do the math.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [October 5, 2022, 4:50pm UTC](https://discourse.gohugo.io/t/using-dart-sass-hugo-and-netlify/37099/18 "2022-10-05T16:50:07Z")

</div>

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