如何使用@use with dart-sass设置scss文件夹结构？

Question

一段时间以来，我一直使用@import来创建以下SCSS文件夹结构。要将这3个部分导入到_utilities-dir.scss等中...例如，将部分参数添加到_utilities-dir.scss中。

utilities
    _utilities-dir.scss
    _functions.scss
    _mixins.scss
    _variables.scss

base
    __base-dir.scss
    _reset.scss
    _typography.scss

然后，我使用@import方法来创建main.scss文件

@import "/utilities/utilities-dir",
@import "/utilities/base-dir",

如何使用新的@use方法创建相同的输出？

Answer 1

使用新规则@use，您需要将所需的文件@use到每个需要使用该文件的var或方法的文件。

换句话说：

仅将文件utilities-dir @use到主文件是不够的。在这种情况下，您只能在主文件中使用vars/方法。您必须在您想要/需要vars/ @use的每个部分直接对文件执行vars/方法...

正如我们多次提到的:如果你愿意，你可以看看更长的解释，在这里解释代码方案示例：https://stackoverflow.com/a/66300336/9268485。