Open MateusRodCosta opened 8 months ago
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?
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.
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.
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?
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)
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.
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:
This will fail with the following error message:
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