Unable to use on Hugo v0.122.0 via Dart Sass

[MateusRodCosta]

Please search for duplicate or closed issues first.

Describe the issue

Unable to compile Hugo website when adding Hugo 2.0.3 as Sass.

Current Behavior

On a Hugo static website, add PicoCss 2.0.3 at /assets/scss/picoss and set the transpiler to Dart Sass and try to serve the website. Like this:

    {{ $opts := dict "transpiler" "dartsass" "targetPath" "css/pico.css" }}
    {{ $picoCssStyle := resources.Get "scss/picocss/pico.scss" | toCSS $opts | minify }}
    <link rel="stylesheet" href="{{ $picoCssStyle.RelPermalink }}">

This will fail with the following error message:

Error: error building site: TOCSS-DART: failed to transform "scss/picocss/pico.scss" (text/x-scss): "/var/home/mateusrc/Projects/mateusrodcosta.github.io/assets/scss/picocss/themes/default/_styles.scss:2:0": Can't find stylesheet to import.

Expected Behavior

I would be able to serve the website with no issues.

Reproduction URL

We recommend including a link to a minimal reproduction of the bug using CodePen or a similar tool.
Please do not link to your actual project. Instead, we need a reduced test case in a new project without any unnecessary code.

N/A

Environment

Example: OS, versions, browser details.

OS: Fedora Silverblue 39
Hugo: v0.122.0-b9a03bd59d5f71a529acb3e33f995e0ef332b3aa+extended
Dart Sass: 1.71.0

[vardumper]

Did the Dart Sass work flawlessly with pico v1.5.x? If so, it is likely that it doesn't properly support the @forward and/or @use statements. At least that's the behavior I found with phpscss which Is why I switched to lib sass or sass-npm. Is using a different compiler or pre-compiling an option?

[MateusRodCosta]

Did the Dart Sass work flawlessly with pico v1.5.x? If so, it is likely that it doesn't properly support the @forward and/or @use statements. At least that's the behavior I found with phpscss which Is why I switched to lib sass or sass-npm. Is using a different compiler or pre-compiling an option?

IIRC, v1.5.12 works fine with libsass shipped in hugo-extended but I didn't try with dart sass, but v2.0.3 completely fails with libsass.

Is using a different compiler or pre-compiling an option?

These are all the configs hugo allows me: https://gohugo.io/hugo-pipes/transpile-sass-to-css/
Afaik, I can only use libsass or dart sass.

[MateusRodCosta]

Oh, just to be clear:

v1.5.12 works with both libsass and dartsass
v2.0.3 will fail with an error with dartsass (the error I reported in the initial comment) but will create a minified file with the following content if using libsass:

@forward "settings";@use "index"

Just as if the conversion from sass to css had completely failed.

[vardumper]

I have no clue of the inner workings of Hugo or its tech stack nor its deployment. So I can't really help here. But is it a 100% necessary to do the compiling that way? Could you just do <link rel="stylesheet" href="//some.cdn.com/pre-compiled-pico.css" /><link rel="stylesheet" href="custom-precompiled-theme.css" /> something like this, to avoid the problem altogether?

[MateusRodCosta]

For now I have reverted to using the pre compiled .min.css variant.

I believe all my CSS broke due to the new pico- prefix, so now that I adjusted the CSS I will have to retest whether Pico CSS as scss works with libsass (but for sure it seems to be broken with dart sass)

[MateusRodCosta]

I made a new attempt, apparently libsass doesn't support the @use directive and the issue I'm having with Dart Sass is apparently related to relative imports.

So, I would have to figure out how to set correctly the path Hugo uses to resolve the relative imports.
I can set the includePaths option on Hugo but still no luck in getting it working so far.

So, while the change to using @use on picocss broke it for me, I would likely have to talk with the Hugo project to figure out how to fix this.