SassError: "This variable was not declared with !default in the @used module"

[SachaG]

Using pico v2.0.3 in a Next.js project via the npm package (and using pnpm), the regular version works fine but trying to use @use with the yellow theme gives me this error:

This variable was not declared with !default in the @used module

[SachaG]

Seems similar to https://github.com/sass/dart-sass/issues/2063

[SachaG]

Oh, I noticed that although @use "pico"; works, it's loading the previous version of Pico (pre-2.0). So maybe that's the root of the issue? If that variable doesn't exist in previous versions that might explain the error. But then how can I make it load the right version…?

Note: on the other hand @import "@picocss/pico/scss/pico"; does load v2…

[glaplace]

Hello,

I have same error (vuejs 3 + vitejs).

To solve it i use

@use "@picocss/pico/scss/pico" with (
  $theme-color: "grey"
);

It works but i have the same question as @SachaG .

Won't this be a problem in the future ?

Thanks.

[iGormilhit]

Hi,

I'm trying to use picocss with hugo and I'm encountering just this issue.

In my HTML template, I have this options to define where to find picocss, and the transpiler to use:

{{- if hugo.IsServer -}}
  {{- $options := (dict
    "targetPath" "styles.css"
    "transpiler" "dartsass"
    "includePaths" (slice "node_modules")
  ) -}}
  {{- $styles := resources.Get "scss/main.scss" | toCSS $options }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">

And in my scss file:

@use "@picocss/pico/scss/pico" with (
  $theme-color: "purple"
);

And the hugo error is:

ERROR Rebuild failed: TOCSS-DART: failed to transform "/scss/main.scss" (text/x-scss): "/home/<path>/assets/scss/main.scss:8:2": This variable was not declared with !default in the @used module.

[iGormilhit]

Sorry, I haven't the right pico version installed. With the latest one I don't have this issue anymore.