css - 如何使用 @use 在 main.scss 中导入 .scss 模块

Question

所以，假设我有以下情况：我有 2 个 .scss 文件。
一个带有变量，一个将实际转换为我的网页的 .css，我想在其中访问所述变量。

变量.scss

$my_color: red;

主文件

@use 'vars'

body {
  color: $my_color;
}

我要做的是访问vars.css并使用其中定义的变量。

引用是正确的，因为如果我使用@import而不是@use，一切正常

我也尝试vars.$my_color按照文档中的建议引用变量，但我不断收到“未定义的变量”错误。

标签： csssass

Answer 1

好吧，如果您阅读了文档，那么在⚠️ Heads up!下面的部分中，您可以阅读以下内容：

---

@import 规则有许多严重的问题：

@import 使所有变量、mixin 和函数全局可用。

---

因此，@use规则使它们不可访问。这是你在行动中观察到的。

我认为要达到预期的结果，应该使用@use 和@forward 规则的组合。

但我正在使用 VSCode Live Sass 编译器（也许你也在使用它？）其中不支持 @use，所以我不能给你确切的操作方法。

希望这能澄清很多。