Extended Hugo version is not working

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

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 + ')'};
}
2 Likes

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

Got this link supporting your answer from another friend in Discord

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

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

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 ?

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

To make dartsass works:

  1. Make sure you set transpiler option to dartsass to toCSS function.
  1. Download latest dart-sass-embedded and make it available globally in os $PATH.

Hi,

I’m trying to relate this to my project structure

image

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

set transpiler to dartsass in your resources.ToCSS options.

e.g.

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

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

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

you can test it by running:

sass --version

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?

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


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

tried all methods, nothing seems to work :frowning:

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

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.

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.

2 Likes

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