Unable to use on Hugo v0.122.0 via Dart Sass about pico HOT 6 OPEN

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?

from pico.

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?

from pico.

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.

from pico.

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.

from pico.

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)

from pico.

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.

from pico.