Installing dart-sass-embedded

support
1

Having some trouble here. I’m attempting to use dartsass, and I’ve got it set up in my template, however I’m getting:

Error: Error building site: TOCSS-DART: failed to transform "file.scss" (text/x-scss). You need dart-sass-embedded in your system $PATH.

Ok, I saw that in the docs and downloaded beta 7 of dart-sass-embedded. Now here’s my question (after attempting a few different things and getting nowhere):

  • Do I just double-click run the binary ‘dart-sass-embedded’ and I’m good? (seems to do nothing)
  • I have sass/sass/sass installed via Homebrew, does that matter?
  • If I downloaded this binary from Github to my Downloads folder, is that the path I add to $PATH? (that doesn’t seem to work for me). Should I move the sass_embedded folder to ~/Applications?

I wholly acknowledge my ignorance here, but would love even a nudge in the right direction. Thank you!

1 Like
2

EDIT: Ignore this reply. Please see @bep’s answer below: Installing dart-sass-embedded - #12 by bep

My educated guess is that you’re using a Mac.

Here’s a sample Bash script to download Dart Sass, add it to your PATH, and confirm it.

Usage

# Create a new file named: install-dart-sass.sh

# Make it executable
chmod 755 install-dart-sass.sh

# Run it
./install-dart-sass.sh

# RESTART Terminal

# Confirm install
sass --version

Contents of install-dart-sass.sh

#!/usr/bin/env bash

VERSION="1.32.11"

echo -e "\nMaking dir to hold custom binaries ..."
mkdir -p ~/bin 

echo -e "\nAdding dir to your PATH ..."
echo 'export PATH=${PATH}:${HOME}/bin/dart-sass' >> ~/.bash_profile

echo -e "\nChanging to Downloads dir ..."
cd ~/Downloads

echo -e "\nDownloading Dart Sass ..."
curl -L -O https://github.com/sass/dart-sass/releases/download/${VERSION}/dart-sass-${VERSION}-macos-x64.tar.gz

echo -e "\nUnzipping the Dart Sass tarball ..."
tar -v -x -C ~/bin -f dart-sass-${VERSION}-macos-x64.tar.gz

echo -e "\nRESTART your Terminal to pick up the change ..."
echo -e "\nThen confirm Dart Sass install by running: sass --version"

Reference

List, Get, Set, and Unset Mac and Linux Environment Variables in Terminal

2 Likes
3

Thank you for this! Now, I already have Sass installed via Homebrew, and this looks like it’s just installing Dart Sass as well. For instance, when I run sass --version I get 1.32.11.

Is the Homebrew install just not setting up the $PATH as your script does above?

4

Possibly.

You can list every occurrence of sass on your PATH by running:

which -a sass

Which, for me, outputs:

$ which -a sass
/Users/zwbetz/bin/dart-sass/sass
5

I get

which -a sass
/opt/homebrew/bin/sass
6

Okay. So you have the homebrew-installed version of sass on your PATH.

But not the dart sass version mentioned in my original reply.

7

Hmm, I thought the Homebrew install was Dart Sass, as mentioned on http://www.sass-lang.com/install:

Install on Mac OS X or Linux (Homebrew)
If you use the Homebrew package manager for Mac OS X or Linux, you can install Dart Sass by running
brew install sass/sass/sass

which is what I have:

$ brew install sass/sass/sass
Warning: sass/sass/sass 1.32.11 is already installed and up-to-date.
8

I’m following you now. Hmm, in that case, I’m not sure why you’re getting this error then.

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

Right? So dart-sass-embedded is not part of the Dart Sass package and needs to be installed separately, it seems? Or is your install working fine, assuming you’re using dart sass in Hugo?

10

Yes, it wraps Dart Sass in a protocol that Hugo understands. So, it’s a standalone binary, but it’s not the same as the Dart Sass CLI.

But it needs to be on the PATH for Hugo to find it.

11

Ok, thanks for the clarification, @bep.

Now back to my original issue, I’m unsure what I’m doing wrong to get it into my $PATH. Any path I add to my ~/.zshrc shows up when I echo $PATH, but does not get recognized by Hugo, and I still get

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

OK, just revisited running this myself, and I assume my head-scratching may be the source of your problem. Ref.:

 env PATH=$PATH:/Users/bep/dev/go/bep/godartsass/lib/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).

2 Likes
13

That worked, thank you @bep!

Incidentally, this also fixed some Sass issues Hugo was hanging on, related to some hsl() and CSS custom property use. Assuming the newer Dart Sass knew how to handle those.

3 Likes
14

Yes, Dart Sass is a much better maintained product.

15

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