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

【问题标题】：how to set up scss folder structure using @use with dart-sass?如何使用 @use 和 dart-sass 设置 scss 文件夹结构？
【发布时间】：2021-03-24 22:38:33
【问题描述】：

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

【问题讨论】：

标签： sass dart-sass

【解决方案1】：

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

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

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

【讨论】：