Hugo extended for sass doesn't work in my ubuntu

Hi all,

I have installed Hugo extended sass version in my ubuntu. But couldn’t still get the latest Dart Sass features.

balachandiran@tensketch:~$ hugo version
hugo v0.88.1+extended linux/amd64 BuildDate=unknown

I’m getting this error:

ERROR 2021/09/28 08:00:57 TOCSS: failed to transform “scss/main.scss” (text/x-scss): SCSS processing failed: file “”, line 0, col 0: Incompatible units: ‘%’ and ‘px’.

scss path is themes/themeName/assets/scss/main.scss
and in the partials/head.html,

{{ "<!-- Main Stylesheet -->" | safeHTML }}
    {{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">

and this is produced in my resources folder

image

Why is 2 scss folders created?
What am I doing wrong?
How to get the Dart Sass in Hugo properly?

Please advice

Repo link:
branch: hugo-new-struct

thanks in advance
Balachandiran

See:
https://discourse.gohugo.io/t/requesting-help/9132

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

1 Like

Thank you,

I have edited the question. Repo link added.

I am unable to reproduce the error.

git clone --recurse-submodules https://github.com/TenSketch/Charis-hugo-TenSketch
cd Charis-hugo-TenSketch/
git checkout hugo-new-struct
hugo

The Hugo pipes are still using the old sass version,

When I ran “hugo server”,

I checked the sass version installed also

balachandiran@tensketch:~$ sass --version
1.42.1

Kindly check the code and tell me.

In its default mode, Hugo does not use an external application to transpile SASS into CSS. And you are using Hugo in its default mode:

https://github.com/TenSketch/Charis-hugo-TenSketch/blob/hugo-new-struct/themes/ecom-hugo-theme/layouts/partials/head.html#L43-L49

I’m already thinking the same. this is the default mode right?

 {{ "<!-- Main Stylesheet -->" | safeHTML }}
    {{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">

How should I link the scss in the Extended version?

And what am I supposed to do with this folder?

image

Thanks

Yes.

You are already doing it correctly.

Nothing.

If i’m already doing everything right, then why am I getting the error?

ERROR 2021/09/28 10:07:54 TOCSS: failed to transform “scss/main.scss” (text/x-scss): SCSS processing failed: file “”, line 0, col 0: Incompatible units: ‘%’ and ‘px’.
Total in 32 ms

Look at my second post in this topic.
Create a new directory outside of your project directory, and repeat the commands that I used.

Does the error still appear?

yeah, i already did that too, the same error is there.

I also deleted the resources folder and ran hugo server again. :expressionless:

How did you install Hugo?

brew install hugo
and when upgraded using brew upgrade hugo
image

Try the pre-built binary:
https://github.com/gohugoio/hugo/releases/tag/v0.88.1

Download “hugo_extended_0.88.1_Linux-64bit.tar.gz”, and extract the executable to the root of your project directory. Make sure it has 700 permissions or greater. Then run ./hugo.

When you run ./hugo version you should see:

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

Also, are you sure the GitHub repository has your latest changes? It was last updated 11 hours ago, commit d2470bf.

I have extracted it into the project root,

these are the permissions

I get this

balachandiran@tensketch:~/Desktop/hugo-new-struct/Charis-hugo-TenSketch$ ./hugo
bash: ./hugo: No such file or directory

What to do?

yeah its updated

hugo_extended_0.88.1_Linux-64bit is a directory, not a file. The executable is in the directory. Move it to the project root.

ok now I get this

balachandiran@tensketch:~/Desktop/hugo-new-struct/Charis-hugo-TenSketch$ ./hugo version
hugo v0.88.1-5BC54738+extended linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio

but still the incompatibility error is there,

balachandiran@tensketch:~/Desktop/hugo-new-struct/Charis-hugo-TenSketch$ ./hugo
Start building sites … 
hugo v0.88.1-5BC54738+extended linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio
WARN 2021/09/28 13:11:56 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2021/09/28 13:11:56 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2021/09/28 13:11:56 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2021/09/28 13:11:56 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): SCSS processing failed: file "", line 0, col 0: Incompatible units: '%' and 'px'. 
Total in 454 ms
balachandiran@tensketch:~/Desktop/hugo-new-struct/Charis-hugo-TenSketch$ ./hugo version
hugo v0.88.1-5BC54738+extended linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio
balachandiran@tensketch:~/Desktop/hugo-new-struct/Charis-hugo-TenSketch$ hugo server
port 1313 already in use, attempting to use an available port
Start building sites … 
hugo v0.88.1+extended linux/amd64 BuildDate=unknown
WARN 2021/09/28 13:12:09 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2021/09/28 13:12:09 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2021/09/28 13:12:09 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2021/09/28 13:12:09 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): SCSS processing failed: file "", line 0, col 0: Incompatible units: '%' and 'px'. 
Built in 220 ms
balachandiran@tensketch:~/Desktop/hugo-new-struct/Charis-hugo-TenSketch$ 

Where should I paste the executable file if I want it globally? Am I missing any environment variables?

Should I uninstall Hugo and install this “hugo_extended_0.88.1_Linux-64bit.tar.gz” again globally?

Forget about the executable you downloaded. We were just testing to see if we obtained different results when compared to your brew installation. The results were the same.

At this point I don’t know what is wrong. I’ve done this:

git clone --recurse-submodules https://github.com/TenSketch/Charis-hugo-TenSketch
cd Charis-hugo-TenSketch/
git checkout hugo-new-struct
hugo

on 3 different systems – no errors.

Maybe try it on another system…