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

问题描述

一段时间以来，我一直在使用 @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 方法创建相同的输出？

解决方法

使用新规则 @use，您需要将需要的文件@use 到每个文件，其中您需要使用该文件的变量或方法。

换句话说：
将 @use 文件 utilities-dir 写入主文件是不够的。在这种情况下，您只能在主文件中使用 vars/methods。你必须@use在你想要/需要变量/方法的每个部分直接中的文件......

正如我们多次遇到的那样：如果您愿意，可以在此处查看更长的解释，并在此处解释代码方案示例：https://stackoverflow.com/a/66300336/9268485。