无法将 sass 变量从一个 scss 文件导入到另一个答案

【问题标题】：Unable to import sass variables from one scss file to another无法将 sass 变量从一个 scss 文件导入到另一个
【发布时间】：2020-09-06 16:55:05
【问题描述】：

在我的 React 应用程序中，我有一个名为 _variables.scss 的文件，其中包含以下代码。它包含我想在所有 .scss 文件中使用的变量：

$navy: #264653;
$green: #2A9D8F;
$yellow: #E9C46A;
$orange: #F4A261;
$red: #E76F51;

$title-font: "Arial Rounded MT Bold", sans-serif;
$text-font: "Raleway", sans-serif;

我想使用另一个 .scss 文件中的变量。这是我在另一个文件中的代码：

@use './design/variables' as v;

* {
  font-family: v.$text-font;
}

但是，我的 React 应用程序没有识别变量，而是返回以下错误：

我已经检查过文件的路径是正确的。

我该如何解决这个错误？

【问题讨论】：

不确定@use。试试@import './design/variables'。也只是$text-font，但不是v.$text-font。
是的，成功了！
然而，我在这里读到stackoverflow.com/questions/17598996/… @import 已被弃用，我们应该使用@use。您将如何使用 @use 解决错误？为什么@import 会被弃用？
不确定。如果您使用的是@use，请尝试使用#{v.$text-font}
这种方式不起作用 ```` SassError: Invalid CSS after " font-family: #{v": 预期的表达式（例如 1px，粗体），是 ".$text-font} ;"在 /Users/arnau/Desktop/PROJECTES/diverteach/src/App.scss >> font-family: #{v.$text-font} 的第 4 行； ------------------^ ````

标签： reactjs sass

【解决方案1】：

我假设您像大多数人一样使用 Node-Sass。 @use 仅受 Dart-Sass 支持，并且可能永远支持。 @import 将被废弃的公告是 5 年前发布的。

【讨论】：

我应该使用 dart-sass 而不是 node-sass 吗？还是我不应该打扰并继续使用 node-sass？
@ArnoldGee，使用 Node-Sass 绝对没有错，Dart-Sass 是主要实现并且首先获得每个新功能，这意味着它也不是最稳定的。如前所述，取消 @import 的公告是 5 年前发布的。