Absolute SCSS import resolving inconsistency

[adrianjost]

Issue description

I have noticed an inconsistency in the linked file resolving in css code between VSCodes native .scss resolving and the behavior in .vue files when using absolute URLs.

In .scss files without any plugins installed, I can click the filepath and the desired file opens.
@import "/src/lib/styles/interactivity.scss";

But when removing the leading / it's not working anymore
@import "src/lib/styles/interactivity.scss";
I think this is, because when leading slash is missing, it's treated for some reason as a relative import. At least the resolved path I can see in the filepath bar of VSCode gives me that feeling.

However in .vue SFC files (with Vue Language Features (Volar) (Vue.volar) installed) the behavior is flipped.

<style lang="scss">
@import "src/lib/styles/colors.scss";`
</style>

is working just fine and clicking the filepath opens it. But with the leading / the filepath is appended to the workspace path without a / in between.

(notice the afiliosrc)

Troubleshooting Steps I've done so far:

• disable all plugins (except Volar)
• trying to understand how the VSCode integration works, but couldn't figure it out. From my understanding in both cases (scss and vue files) the vscode-css-languageservice should be used. However there is a difference - or I misunderstood something. I also couldn't figure out how https://github.com/volarjs/plugins/blob/master/packages/css/src/index.ts#L125 plays into that. It felt related, butI didn't quite understand the general structure how all systems interact with each other.

Desires solution

• I would like to see the same resolve behavior for absolute scss imports in .scss and .vue SFCs. I wouldn't care if it requires a different syntax for absolute imports, it should just be consistent.

Please let me know if you need more details or I should post the issue somewhere else because it isn't directly caused by this package. I would love to support here, but couldn't figure out how to move things forward myself anymore.

[johnsoncodehk]

Thank you for the report. How should resolve the following situation?

<style lang="scss">
@import "any_pkg/styles/colors.scss";`
</style>

A: [root]/any_pkg/styles/colors.scss
B: [root]/node_modules/any_pkg/styles/colors.scss

[adrianjost]

VSCodes default behavior in .scss files is to resolve them to (B) [root]/node_modules/any_pkg/styles/colors.scss.

// test.scss
@import "any_pkg/styles/colors.scss";`

resolves with CMD+Click to node_modules/any_pkg/styles/colors.scss

So it would be nice, to be consistent and have the same behavior in .vue files.
The current version of Volar is already resolving it to B too.

More details how VSCode behaves in .scss files and .vue files with Volar enabled.

.	code	.scss file resolve path	.vue file resolve path
1	@import "src/file.scss";	[currentDir]/src/file.scss ❌	[root]/src/file.scss
2	@import "/src/file.scss";	[root]/src/file.scss	[root]src/file.scss ❌ (no / after root)
3	@import "any_pkg/file.scss";	[root]/node_modules/any_pkg/file.scss	[root]/node_modules/any_pkg/file.scss
4	@import "~any_pkg/file.scss";	[root]/node_modules/any_pkg/file.scss	[root]/node_modules/any_pkg/file.scss
5	@import "~src/file.scss"; (invalid scss, can't compile)	not linked	not linked

(same applies for @use instead of @import)
❌ means, no file found, because of incorrect path.

Replicating the behavior of 1 & 3 together might be difficult, but from my point of view, 1 is useless anyway. It doesn't resolve to the desired file anyway, even though the sass compiler can resolve it correctly. So just deciding based on the leading slash would be sufficient. If it's there => resolve to root, if not resolve to node_modules.

[johnsoncodehk]

Thanks. 👍