Vite does not bundle assets that are referenced within sub SCSS if the imported SCSS doesn't live in same folder as the entry SCSS file

Question

Using vite with laravel 9, working with the default configuration, I have multiple folder structures for my scss, inside which some have an scss that imports fonts, and some have images as well.

During the development, I found out that all assets fonts and images referenced within the subsequent subfolder to the root folder of the scss entry point are never imported.

project
└───resources
    │   scss
    │   └───app.scss
        └───images
            └───avatar.png
        └───subfolder
            └───_shop.scss

In the above folder structure, if I reference avatar.png within *shop.scss and import *_shop.scss inside app.scss the asset avatar.png will not be bundled both in the production and in the development phase

if i try to do the referencing from the same folder as the folder of app.scss scss entry point it gets bundled.

I have searched for similar issues online and the only solution at my disposal is this similar issue raised on GitHub with the solution being to add the code below to the javascript entry point

const res = import.meta.glob(['../images/**'])

However, it did not work when i added it