How to use dart sass?

support
1

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

2

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 }}">
3

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

EDIT : It works with beta 5, thank you

4

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
5

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