Как работать с sass @use и webpack sass-loader

В моем проекте я обнаружил, что на мою страницу были введены дубликаты стилей, поэтому для решения этой проблемы я перешел на @use вместо использования @import. После этого шага я обнаружил, что он также дал мне дубликаты, даже если в документации сказано, что вы можете использовать @use без дублирования.

Я обнаружил, что проблема заключалась в том, что, поскольку я импортирую свой sass в javascript, создаются дубликаты, если удалить весь импорт javascript sass и использовать только @use, он работает нормально, но я хочу понять, как я должен использовать эту функцию.

Мой проект разбит на разные модули, вот пример:

/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