Extended Hugo version is not working

TenSketch · March 17, 2022, 2:15pm

Hi there,

I have installed Hugo extended version in my ubuntu using Homebrew

$ hugo version
hugo v0.88.1-5BC54738+extended linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio

I tried using latest CSS features,

  width: min(991px, 80%);

But I got this error.

ERROR 2022/03/17 19:40:04 Rebuild failed:

ERROR 2022/03/17 19:40:04 TOCSS: failed to transform “scss/main.scss” (text/x-scss): SCSS processing failed: file “”, line 0, col 0: Incompatible units: ‘%’ and ‘px’.
Total in 4 ms

I’m not sure if I had to update any path. And how to do it?

Kindly suggest. Thanks in advance

pamubay · March 17, 2022, 2:47pm

EDIT: This solution for libsass version

it’s because SASS also have native min() function and apparently doesnt support that unit comparison:

you can override default SASS min() function, will return the property value as-is

@function min($args...) {
  @return #{'min(' + $args + ')'};
}

TenSketch · March 17, 2022, 5:56pm

Thank you, I tried using CAP M for Min() and it worked.

Got this link supporting your answer from another friend in Discord

pamubay · March 17, 2022, 7:22pm

my solution above for libsass version.

EDIT: After simple test, apparently built-in modules cannot be used/imported without namespace, looks like OP problem is not this.

DELETED CODE

TenSketch · March 18, 2022, 6:26am

Should I add this at the beginning of the main scss file?

pamubay · March 18, 2022, 7:05am

First of all, are you really using dartsass ??, from your deleted reply above, i assume you are using dartsass to transpile sass file.

I just tried using dartsass, and the error contains TOCSS-DART word, like this:

Error: Error building site: TOCSS-DART: failed to transform “scss/dart.scss” (text/x-scss): “/…/dart.scss:6:9”: file: “HUGOSTDIN”, context: " width: math.min(991px, 80%);\n": 991px and 80% have incompatible units.

meanwhile your ERROR is not, so actually you are using libsass ?

TenSketch · March 18, 2022, 5:15pm

Yes, Dart sass is not working. I tried using @use, it throws error.

hugo v0.88.1-5BC54738+extended linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio
Error: Error building site: TOCSS: failed to transform “scss/main.scss” (text/x-scss): SCSS processing failed: file “stdin”, line 50, col 19: Invalid CSS after " font-size: fonts": expected expression (e.g. 1px, bold), was “.$font_size-body;”
Built in 21 ms

pamubay · March 19, 2022, 2:18am

To make dartsass works:

Make sure you set transpiler option to dartsass to toCSS function.

Download latest dart-sass-embedded and make it available globally in os $PATH.

TenSketch · March 28, 2022, 6:04am

Hi,

I’m trying to relate this to my project structure

In the head.html,

{{ $options := (dict "targetPath" "style.css" "outputStyle" "expanded" "enableSourceMap" true "includePaths" (slice "node_modules/myscss")) }}
    {{ $style := resources.Get "scss/main.scss" | resources.ToCSS $dartsass }}

I don’t understand the code completely,
what should I change in these:

"targetPath" "style.css"
"includePaths" (slice "node_modules/myscss"))
resources.ToCSS $options

where should I mention dartsass

And also please tell me how to include dartsass globally on path.

I have installed it using brew in Ubuntu
thank you

pamubay · March 28, 2022, 6:57am

set transpiler to dartsass in your resources.ToCSS options.

e.g.

{{- $options := dict 
 "transpiler" "dartsass"
 //... rest of options
-}}

https://gohugo.io/hugo-pipes/scss-sass/#options

EDIT: sorry, i mixed the dart sass normal binary with dart-sass-embedded

~~if you installed using brew, i assume it’s in global path automatically~~

~~you can test it by running:~~

~~sass --version~~

TenSketch · March 30, 2022, 7:59am

Ok, this is what i changed to link stylesheet in head.html

    {{ "Main Stylesheet" | safeHTML }}
    {{ $options := (dict "transpiler" "dartsass" "outputStyle" "expanded" "enableSourceMap" true) }}
    {{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options }}
    <link rel="stylesheet" href="{{ $style.Permalink }}">

I also removed hugo completed and reinstalled using binary,

and then I got when I ran “hugo server”

$ hugo server
Start building sites …
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb+extended linux/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio
Error: Error building site: TOCSS-DART: failed to transform “scss/main.scss” (text/x-scss). You need dart-sass-embedded in your system $PATH.: this feature is not available in your current Hugo version, see Frequently asked questions | Hugo for more information
Built in 277 ms

I got

$ sass --version
1.49.9

$ which hugo
/usr/local/bin/hugo

I edited the .bashrc file in

export PATH=$PATH:/usr/local/bin/hugo

I’m not sure if I’m adding the path right. Could you please tell me?

pamubay · March 30, 2022, 9:03am

Sorry, i mixed the dart sass normal binary with dart-sass-embedded

Unfortunately, looks like the only way to install dart-sass-embedded is by download it from github release page:

Extract the content and put wherever you like as long it’s recognized in Global PATH.

in my machine i put it here:

/home/pamubay/.local/bin/dart-sass-embedded

also, if it needs execute permission,

cd /home/pamubay/.local/bin/
chmod +x ./dart-sass-embedded

also, this is my .bashrc to add $HOME/.local/bin to global $PATH

export PATH=$HOME/.local/bin:$PATH

TenSketch · March 30, 2022, 2:15pm

tried all methods, nothing seems to work

under usr/local/bin directory also, I extracted both sass and hugo

this is using homebrew:

:~/Desktop/Websites/myWebsite$ sass --version
1.49.9 compiled with dart2js 2.16.1
:~/Desktop/Websites/myWebsite$ which sass
/home/myUserName/.linuxbrew/bin/sass
:~/Desktop/Websites/myWebsite$ hugo version
hugo v0.96.0+extended linux/amd64 BuildDate=unknown
:~/Desktop/Websites/myWebsite$ which hugo
/home/myUserName/.linuxbrew/bin/hugo

In my .bashrc file:

HUGO TO PATH

export PATH=$PATH:/home/myUserName/.linuxbrew/bin/hugo

DART-EMBEDDED SASS TO PATH

export PATH=$PATH:/home/myUserName/.linuxbrew/bin/dart-sass-embedded

SASS TO PATH

export PATH=$PATH:/home/myUserName/.linuxbrew/bin/sass

davidsneighbour · March 31, 2022, 2:32am

You overwrite your dart-sass with the last sass. Choose one.

If you just wish to make Sass NOT use the internal function, follow the advise in this stackoverflow post:

It’s only related, but the basic method stays. You have to override the internal sass function to get features that the used Sass version doesn’t know.

Or maybe just remove the “SASS TO PATH” part, because dart-sass is sass - no guarantee it will work then.

jmooring · March 31, 2022, 6:20pm

To install dart-sass-embedded on Linux:

base=https://github.com && temp=dart-sass-embedded.tar.gz
path=$(curl -sL https://github.com/sass/dart-sass-embedded/releases/latest | grep "href.*linux-x64.tar.gz" | awk -F'"' '{print $2}')
wget -qO $temp $base$path
tar -xvzf $temp
sudo mv sass_embedded/dart-sass-embedded /usr/local/bin/
sudo chmod 755 /usr/local/bin/dart-sass-embedded
rm $temp
rm -r sass_embedded/

Test:

dart-sass-embedded --version

You should see this:

{
  "protocolVersion": "1.0.0",
  "compilerVersion": "1.49.10",
  "implementationVersion": "1.49.10",
  "implementationName": "Dart Sass",
  "id": 0
}

To transpile your SCSS to CSS:

{{ $opts := dict "transpiler" "dartsass" }}
{{ $scss := resources.Get "scss/main.scss" }}
{{ $css := $scss | toCSS $opts | minify }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">

This is thoroughly tested.

system · April 2, 2022, 6:20pm

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

Topic		Replies	Views
Hugo extended for sass doesn't work in my ubuntu support	26	1446	October 4, 2021
TOCSS: failed to transform "style.scss" support theme-building	12	5450	December 26, 2022
Error building site: TOCSS-Dart support dart-sass	13	1241	February 2, 2024
Failing to build scss support	1	1062	April 4, 2021
"you need the extended version to build SCSS/SASS" in extended version? support	2	2288	May 7, 2021

Extended Hugo version is not working

HUGO TO PATH

DART-EMBEDDED SASS TO PATH

SASS TO PATH

Related topics