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 without importing the in my JS. This is the way how it works sass