Weird coloring and `@apply` issues in SCSS files (or in Vue SFCs)

Here’s my repo, you can see that I have src/stylesheets/scrollbar.scss that is imported within a root.scss file in the same directory, and I import that root in my nuxt.config.js > css. When I tried using Windi classes (with @apply), it didn’t work in those files (you can check blame to see how I switched to variables instead). This only happens for external SCSS files. I tried some methods, putting that directory in includes of windi.config.js but no luck there either.

There’s also another issue with @apply in both external files and in SFC style tags. They’re not colored, which makes it look like it’s not a part of the code. I don’t think it’s because of my VSC theme (I use Dracula) because, before the switch from Tailwind’s official extension, they were all colored with no problems.

You see that the coloring of @apply is missing and all classes look weird. You can see here how it was when using Tailwind’s extension).

🌟 One idea!

One thing I always cried about Tailwind’s extension is that it wasn’t able to sort classes in @apply. It’s not important but it’d be amazing to see this in Windi’s extension! If this is possible, I can create a different issue for this!

[voorjaar]

https://github.com/windicss/windicss-intellisense/commit/675ce756535587bae37ff9dc4691a9f34c6923fb should fix this. try v0.16.3

[alexanderniebuhr]

just going to close since there was no much activity lately, if some issue still exists please reopen a new issue