How to use SASS variables for components?

[sneko]

In my project it works to change $body-font-family with something like:

@use 'vuetify' with (
  $heading-font-family: ('Marianne', Verdana, arial),
)

but if I set $border-radius-root it won't change the style for components. What's the hack to do so? I tried multiple things like mentioned into vuetifyjs/vuetify-loader#221 (comment) but it does not work.

Also, I tried to change my strategy to use vite-plugin-vuetify thinking it would help building .css of components with my custom settings... but it does not work even by targetting specifically @use 'vuetify/settings' with (.

I'm totally lost :/

Any idea? Or any public repo as example?

Thank you,

[sneko]

The solution for me was to upgrade from pnpm v7 to v8. It has to be with symlinks, Nothing more. If it's still not working for you with pnpm maybe try to use their hoisted feature to mimic a basic npm structure.