使用@use导入SASS变量

Question

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

我想要实现的是：

• 一个文件theme.scs(被编译为theme.css(包含单独的组件(用于标题、导航、字体等(
• 定义要在组件中重复使用的品牌颜色等变量

我已经让它与@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将永远不会被降级。萨斯的开发人员是一群昏昏欲睡的***。@use仅由Dart Sass支持，我假设您使用的是Node Sass，大多数都支持。因此，需要使用@import，这在大多数用例中没有区别。

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