如何使用 sass @use 和 webpack sass-loader

Question

在我的項目中，我發現我的頁面中注入了 styles 重復項，因此為了解決這個問題，我轉而使用 @use 而不是使用 @import。 在這一舉動之后，我發現它也給了我重復，即使在文檔中它說你可以使用 @use 而不會得到重復。

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.

我的項目分為不同的模塊，這里是一個例子：

/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 1

我發現解決這個問題的方法是我必須將所有 SASS 文件直接鏈接在一起，而無需將它們導入我的 JS 文件中。

如果你想使用@use，你不能在 JS 中導入它們，因為 SASS 需要知道是否以及如何處理導入的文件以防止重復