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

Question

在我的项目中，我发现我的页面中注入了样式副本，所以为了解决这个问题，我使用了@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

Answer 1

我发现解决这个问题的方法是，我必须将所有SASS文件直接链接在一起，而不是将它们导入到我的JS文件中。

如果您想使用@use，则不能在JS中导入它们，因为SASS需要知道是否以及如何处理导入的文件以防止复制