How to work with sass @use and webpack sass-loader

In my project i found that i had styles duplications injected into my page, so to solve this problem i have move to @use instead of using @import. After this move i have found that it gave me duplications too even if into the documentation it says that you can use @use without getting duplications.

I have found that the problem was that since i import my sass into javascript creates duplicates, if remove all javascript sass imports and use only the @use it works fine but i want to understand how i’m supposed to use this feature.

My project it’s split in different modules, here an example:

/header/
--- header.pug
--- header.js
--- header.sass

/footer/
--- footer.pug
--- footer.js
--- footer.sass
    
index.pug
index.js // Before i was importing header and sass here
index.sass // Now here i use @use and import header.sass and footer.sass

Answer

I found that the way to solve this problem I had to link all the SASS files together directly without importing them in my JS files.

If you want to use @use you cannot import them inside JS since SASS need to know if and how to work with the imported files to prevent duplications