Compilation error from loader whenever there are @use rules in .scss files

[mareszhar]

Whenever I have an @use rule inside a .scss file, I get this error on compilation:

Error: @use rules must be written before any other rules.

My guess here is that the style-resources-loader is either:

• a) Using @import rules to prepend my files with the automatic imports I defined. Or:
• b) It's injecting the content of those files after my @use imports.

Either a) or b) would result in the error I'm seeing.

So, is it possible to configure the loader to use @use instead of @import to prepend my files with the .scss imports I specified? Or, alternatively, can I configure the loader to 'hoist' my @use rules so that the automatically injected content is placed only below them?

Thank you in advance for any help.

[CaiWenlie]

since sass use @use instead of @import, you can't prepend sass variables simply. you need write another file and import variables by @use. e.g. base.scss

@use '@/styles/vars.scss' as *;

note: you must use absolute path.