Node modules SCSS imports not resolved properly in nested path

[zaalbarxx]

Describe the bug

Like in stackblitz, we noticed that there is some issue with imports from external packages if "root" SCSS file which imports 3rd party styles is not located in the root directory.
If you move the main.scss file into root directory like here:
https://stackblitz.com/edit/vue3-vite-starter-r4t51x?file=package.json,src%2FApp.vue,src%2Fmain.js
the error goes away and everything works.

The issue here seem to be that for some reason when "root" SCSS file is inside app/styles directory then it tries to resolve the path like for example app/styles/v-calendar, but when you move the main.scss into root directory then it will remove this app/styles goes away and then it assumes it is the node module and correctly resolve it from there.

Not sure if this is related to Vite and it's CSS/SASS plugin itself or maybe it is related to Vue plugin (importing SASS file from script block or JS file seem to correctly import and process the SCSS file). It's worth noting that not every package has this problem (kinda weird, some of other packages do not report this error even though they also have the correct "exports" field in package.json)

Reproduction

https://stackblitz.com/edit/vue3-vite-starter-wmnist?file=package.json,src%2FApp.vue,src%2Fmain.js,vite.config.js

Steps to reproduce

Go to stackblitz and check the console

System Info

windows 11, vite 5.0.6

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vue3-vite-starter-r4t51x (Open reproduction)
• vue3-vite-starter-wmnist (Open reproduction)

[zaalbarxx]

After some investigation I found that this is related to this code which supposedly "rebases" URLs in the imported file

It looks like the path then is "rebased" from "v-calendar/style.css" to "styles/v-calenda/style.css", and then Dart SASS is not able to further resolve the file. The workaround is to either:

• @import './styles/main' in App.vue (instead of importing using alias like @import '@/styles/main', this way it seems that "rebasing" logic is not being triggered
• move the main.scss file to the root of the project (src/ directory)

Either way I think this is a buggy behavior, isn't it ?
Cheers

[sapphi-red]

Duplicate of #12227

[zaalbarxx]

@sapphi-red While I believe this is a minor bug, I don't think it is the same case as the one you marked as duplicate of this. Here there is no issue with node module's style transively importing other style since we are importing CSS file.

[sapphi-red]

I believe the underlying problem is same and will be fixed by #15000.