使用@use 导入 SASS 个变量

Question

多年来我一直在使用 LESS，现在只是尝试 SASS。我在一个非常基本的事情上遇到了麻烦，所以我希望有人能帮助我。

我要实现的是：

一个文件theme.scss（编译成theme.css）包含单独的组件（用于header、导航、字体等）
在组件

我已经让它与@import 一起工作，但因为它（将要）被弃用，所以我想改用@use。根据https://sass-lang.com/documentation/at-rules/use应该是可以的。

我的文件设置是这样的：

|- style
   |- _definitions.scss
   |- theme.scss
   |- components
      |- component.scss

然后我在文件中有这个：

// theme.scss
@use 'definitions';
@use 'components/component.scss';

// _definitions.scss
$base-color: blue;

// components/component.scss
body {
    background: $base-color;
}

但这不起作用：我的编译器（我使用的是 Prepros）只是说找不到变量 $base-color。 :( 注意：如果我用 @import 替换 @use，它就可以正常工作。

帮忙？

Answer 1

@import 永远不会被贬低。 Sass' 开发人员是一群昏昏欲睡的****。 @use 仅受 Dart-Sass 支持，但我假设您使用的是 Node-Sass，大多数都是。因此你需要使用@import，这在大多数情况下没有区别。

您可以在标题下找到信息，这是第一行，几乎所有人都会跳过。

使用@use 导入 SASS 个变量

Importing SASS variables with @use

sass

prepros