Hugo builds support Dart Sass?

Support
1

Any plans to support Hugo’s dartsass implementation? It requires dart-sass-embedded.

Currently when I deploy with the Dart Sass transpolar turned on, I get

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

Here’s the full build log:

12:14:30 AM: Build ready to start
12:14:32 AM: build-image version: be42e453d6c8f171cc2f654acc29c0a8b60e6d93
12:14:32 AM: build-image tag: v3.7.1
12:14:32 AM: buildbot version: b47b671c7e5601877c51968241eb899bf590a815
12:14:32 AM: Fetching cached dependencies
12:14:32 AM: Starting to download cache of 286.7MB
12:14:34 AM: Finished downloading cache in 1.943662713s
12:14:34 AM: Starting to extract cache
12:14:41 AM: Finished extracting cache in 7.746199862s
12:14:41 AM: Finished fetching cache in 9.764409392s
12:14:41 AM: Starting to prepare the repo for build
12:14:42 AM: Preparing Git Reference refs/heads/master
12:14:44 AM: Starting build script
12:14:44 AM: Installing dependencies
12:14:44 AM: Python version set to 2.7
12:14:45 AM: Started restoring cached node version
12:14:48 AM: Finished restoring cached node version
12:14:48 AM: v8.17.0 is already installed.
12:14:49 AM: Now using node v8.17.0 (npm v6.13.4)
12:14:49 AM: Started restoring cached build plugins
12:14:49 AM: Finished restoring cached build plugins
12:14:49 AM: Attempting ruby version 2.3.6, read from environment
12:14:50 AM: Started restoring cached ruby version
12:14:50 AM: Finished restoring cached ruby version
12:14:52 AM: Using ruby version 2.3.6
12:14:53 AM: Successfully installed bundler-2.2.16
12:14:53 AM: 1 gem installed
12:14:53 AM: Using PHP version 5.6
12:14:53 AM: Installing Hugo 0.82.0
12:14:53 AM: hugo v0.82.0-9D960784+extended linux/amd64 BuildDate=2021-03-21T17:28:04Z VendorInfo=gohugoio
12:14:53 AM: Started restoring cached go cache
12:14:54 AM: Finished restoring cached go cache
12:14:54 AM: Installing Go version 1.10
12:14:54 AM: unset GOOS;
12:14:54 AM: unset GOARCH;
12:14:54 AM: export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.10.linux.amd64';
12:14:54 AM: export PATH="/opt/buildhome/.gimme_cache/versions/go1.10.linux.amd64/bin:${PATH}";
12:14:54 AM: go version >&2;
12:14:54 AM: export GIMME_ENV='/opt/buildhome/.gimme_cache/env/go1.10.linux.amd64.env';
12:14:54 AM: go version go1.10 linux/amd64
12:14:54 AM: Installing missing commands
12:14:54 AM: Verify run directory
12:14:56 AM: ​
12:14:56 AM: ────────────────────────────────────────────────────────────────
12:14:56 AM:   Netlify Build                                                 
12:14:56 AM: ────────────────────────────────────────────────────────────────
12:14:56 AM: ​
12:14:56 AM: ❯ Version
12:14:56 AM:   @netlify/build 11.2.2
12:14:56 AM: ​
12:14:56 AM: ❯ Flags
12:14:56 AM:   deployId: 608249a66bfd5d00078830f7
12:14:56 AM: ​
12:14:56 AM: ❯ Current directory
12:14:56 AM:   /opt/build/repo
12:14:56 AM: ​
12:14:56 AM: ❯ Config file
12:14:56 AM:   /opt/build/repo/netlify.toml
12:14:56 AM: ​
12:14:56 AM: ❯ Context
12:14:56 AM:   production
12:14:56 AM: ​
12:14:56 AM: ────────────────────────────────────────────────────────────────
12:14:56 AM:   1. Build command from Netlify app                             
12:14:56 AM: ────────────────────────────────────────────────────────────────
12:14:56 AM: ​
12:14:56 AM: $ hugo
12:14:56 AM: Start building sites …
12:14:56 AM: Total in 345 ms
12:14:56 AM: Error: Error building site: TOCSS-DART: failed to transform "scss/playoffsbracket.scss" (text/x-scss). You need dart-sass-embedded in your system $PATH.
12:14:56 AM: ​
12:14:56 AM: ────────────────────────────────────────────────────────────────
12:14:56 AM:   "build.command" failed                                        
12:14:56 AM: ────────────────────────────────────────────────────────────────
12:14:56 AM: ​
12:14:56 AM:   Error message
12:14:56 AM:   Command failed with exit code 255: hugo
12:14:56 AM: ​
12:14:56 AM:   Error location
12:14:56 AM:   In Build command from Netlify app:
12:14:56 AM:   hugo
12:14:56 AM: ​
12:14:56 AM:   Resolved config
12:14:56 AM:   build:
12:14:56 AM:     command: hugo
12:14:56 AM:     commandOrigin: ui
12:14:56 AM:     environment:
12:14:56 AM:       - HUGO_VERSION
12:14:56 AM:       - TAGS
12:14:56 AM:     publish: /opt/build/repo/public
12:14:56 AM:   redirects:
12:14:56 AM:     - force: true
12:14:56 AM:       from: https://nba.playoffsbracket.com
12:14:56 AM:       status: 301
12:14:56 AM:       to: https://www.playoffsbracket.com/nba
12:14:57 AM: Caching artifacts
12:14:57 AM: Started saving build plugins
12:14:57 AM: Finished saving build plugins
12:14:57 AM: Started saving pip cache
12:14:57 AM: Finished saving pip cache
12:14:57 AM: Started saving emacs cask dependencies
12:14:57 AM: Finished saving emacs cask dependencies
12:14:57 AM: Started saving maven dependencies
12:14:57 AM: Finished saving maven dependencies
12:14:57 AM: Started saving boot dependencies
12:14:57 AM: Finished saving boot dependencies
12:14:57 AM: Started saving rust rustup cache
12:14:57 AM: Finished saving rust rustup cache
12:14:57 AM: Started saving go dependencies
12:14:58 AM: Finished saving go dependencies
12:14:58 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
12:14:58 AM: Creating deploy upload records
12:14:59 AM: Failing build: Failed to build site
12:14:59 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
12:14:59 AM: Finished processing build request in 27.060565915s
1 Like
2

+1 on this “request”.

It seems like an important step to support dartsass as soon as possible since libsass is deprecated since october 2020 (sass-lang.com) and dartsass now is the primary implementation.

1 Like
3

totally hear you on that, @primalivet. We have been a bit underwater this week, but hoping to get some thoughts on this soon. stay tuned.

3 Likes
4

Could you add it as a Go module, either like this Use Hugo Modules | Hugo or by adding to your go.mod file?

1 Like
5

Not sure. As I understand Hugo need an executable on the $PATH for Releases · sass/dart-sass-embedded · GitHub . And I believe go modules aren’t executable?

This all seem to be a bit in limbo as Hugo haven’t yet included dartsass in a bundle installer or something similar. At the same time Hugo dev team waits for embedded dart sass to go out of beta.

Another, maybe more involved but flexible, way to go at it would be for us (customers) to have more control over the docker image deploys are built upon. Or specify an own image in the netlify.toml (similar to how bitbucket pipelines work)

1 Like
6

I thought about this a bit more. It could be worth opening an issue (or a PR!) on our build image repo: GitHub - netlify/build-image: This is the build image used for running automated builds

Another idea is to include the dart-sass binary in your build and then run it as part of your build command, like what’s described here: Install custom Linux packages on deployment image - #2 by fool

7

Hi.

I’m having the same problem. I want to update to dart sass because LibSASS is deprecated, but Hugo needs the dart-sass-embedded binary and I can’t install it on Netlify.

There is an open issue here: Add the Dart Sass Embedded binary · Issue #740 · netlify/build-image · GitHub

10

Hey @evyperez,

We’ve passed the feedback to the relevant team and we would follow-up as things develop.

11

Unless/until Netlify makes the Embedded Dart Sass package part of its build image (or at least provides a method for doing so, perhaps through an environment variable), you can try a GitHub Actions-based approach — as I explained in “Using Dart Sass with Hugo: the GitHub Actions edition.” You may also wish to see my follow-up on how to install the Embedded Dart Sass binary in your local device’s PATH, which is necessary for making all this work in your local Hugo development.

12

Hugo v0.113.0 and earlier required Embedded Dart Sass to transpile Sass to CSS when using the latest features of the Sass language. In May 2023, the Sass team deprecated Embedded Dart Sass in favor of Dart Sass.

Hugo v0.114.0 and later support both Dart Sass and Embedded Dart Sass (deprecated).

Including Dart Sass in the Netlify build image becomes more important every day, as designers and developers increase their use of modern Sass features (e.g., modules).

Dart Sass may be installed via prebuilt binaries and package managers including Homebrew (Linux or macOS) and Snap (Ubuntu and friends).

This is a formal (and hopefully polite) request from the Hugo team to include Dart Sass (and the DART_SASS_VERSION environment variable to specify version) in the Netlify build image.

Thank you for your consideration.

1 Like