为什么我的 Sass 变量在编译时显示为未定义？

Question

我正在尝试使用 Sass 建立一个项目，尽管我已经制作了多个 Sass 项目并且一切似乎都运行良好，但现在我根本无法使用 Sass (SCSS) 变量。我多次检查并重新检查了所有语法，但似乎找不到解决方案。我使用 dart-sass，但使用的是 SCSS 格式。 我的文件结构：

• 样式

  • CSS
    • style.css
    • style.css.map
  • scss
    • 组件
      • _components.scss（使用@forward 导入其余文件）
    • 全局变量
      • _globals.scss（使用@forward 导入其余文件）
      • basics.scss
      • colors.scss（我所说的颜色变量在这里声明）
      • fonts.scss
      • typography.scss
    • 实用程序
      • _util.scss（使用@forward 导入其余文件）
      • functions.scss
    • style.scss（使用@use 导入其余部分索引） 我声明变量然后调用它们的语法应该没问题： 声明（colors.scss）：

  $blue-300: hsl(204, 100%, 45%); 然后打电话给他们（例如_globals.scss）： h1 {color: $blue-300;}

我怀疑这与文档的范围及其在各个文件夹中的位置有关，但我仍然无法理解它。

提前致谢

Answer 1

默认为@use 和@forward 命名空间它们的变量（参见this）。试试@forward *file* as * 和@use globals/globals as *。这将删除命名空间。如果您确实想要命名空间，请尝试globals.colors.$blue-300。

你还能告诉你正在使用的 sass 版本吗？ (sass --version)