HUGO

How to use dart sass?

Hi,

I had followed documentation to try dart sass but it seems difficult to parse scss file correctly for now :

i’ve set the options like that :

[jsConfig]
transpiler = "dartsass"
outputStyle = "expanded"

with this use :

{{ $cssConfig = merge site.Params.jsConfig (dict "targetPath" "main.css") }} 
{{ $styles = resources.Get . | resources.ExecuteAsTemplate "main.css" . -}}`
{{ $styles = $styles | toCSS $cssConfig }}

But i always get this error Error: Error building site: TOCSS-DART: failed to transform "index.tpl.css" (text/x-scss): unexpected EOF (even with an empty file.)

I have tried to remove resources.ExecuteAsTemplate and i’ve also used outputStyle “compressed” but no way…

My dart-sass-embedded binary is available in PATH. (Also dart)

I’m on Mac OS 11.1

Are you sure using the (Beta 5) version as described in documentation?

but if you want to use Hugo with Dart Sass you need to download a release binary from Embedded Dart Sass (beta 5) and make sure it’s in your PC’s $PATH (or %PATH% on Windows).

also, you may try test it using simple template first, e.g.

{{- $mainStyle := resources.Get "scss/index.scss" -}}
{{- $mainStyle := $mainStyle | toCSS (dict "transpiler" "dartsass") -}}
<link rel="stylesheet" href="{{ $mainStyle.RelPermalink }}">

I’m on beta 6, i didn’t know it have impact

EDIT : It works with beta 5, thank you

It does, and it’s on my list to fix. In general:

  • Once this goes out of beta I suspect their API should be pretty stable (and mostly backwards compatible)
  • In beta 6 (which is slightly breaking) they have also added a version API so we can detect this and issue warnings on the Hugo side.
3 Likes

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