Skip to content

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.pug
--- header.js
--- header.sass
--- footer.pug
--- footer.js
--- footer.sass
index.js // Before i was importing header and sass here
index.sass // Now here i use @use and import header.sass and footer.sass


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