search

windicss / nuxt-windicss

🍃 Windi CSS for Nuxt ⚡
331 stars 24 forks source link

Can not use sass variables when using Nuxt 3. #177

Closed xiaoluoboding closed 2 years ago

xiaoluoboding commented 2 years ago

Describe the bug

Can not use sass variables when using Nuxt 3.

To Reproduce

Checkout: https://stackblitz.com/edit/nuxt-starter-27pv52

Expected behavior

Both use sass and windicss normally.

Screenshots

CleanShot 2022-06-06 at 15 14 47@2x

Additional context Add any other context about the problem here.

crstnmac commented 2 years ago

Facing similar issue

ShaggyTech commented 2 years ago

You'll have to use interpolation on the variable name.

...more recent versions of Sass require SassScript expressions in custom property values to be written within interpolation.

See https://sass-lang.com/documentation/breaking-changes/css-vars

$--text-light: rgba(0, 0, 0, 0.75);

h1 {
  color: #{$--text-light};
}

You can see it working here: https://stackblitz.com/edit/nuxt-starter-jste7l?file=app.vue