Vuejs scoped style doesn't work with @import

Hi, I found a strange behaviour trying to apply a custom style to a Vuejs component.

My Stack:

Laravel 9
Vue3
Vite

This works:

<style lang="scss">
@import '@/sass/my-theme';
</style>

Using "scope" attribute to limit the action of the style only to the current component the style disappear:

<style lang="scss" scoped>
@import '@/sass/my-theme';
</style>

Does scope isn't compatible with "@import"? Anyone experienced the same issue?

AbdullahAgsar

2 years ago

Level 1

I'm experiencing a similar issue. In my project where I use SSR, the scoped style codes are not working when the server side builds, but they work when I remove the scoped attribute. This issue doesn't occur on the client side, only on the server side.

Please or to participate in this conversation.