sass - 尝试使用新的 @use 语法在 create-react-app 中使用 sass 模块但收到错误

Question

我已经 npm 安装了最新的 node-sass，并且 scss 文件可以正常工作，直到我使用 @use。我在 /shared/tokens/ 文件夹中有一个 _tokens.scss 文件。在 _tokens.scss 我有：

$colorwhite: #ffffff;

在我的根文件夹中，我的 App.scss 如下所示：

@use "shared/tokens/tokens";

.App-header {
  color: tokens.$colorwhite;
}

但我收到此错误：

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
SassError: Invalid CSS after "  color: tokens": expected expression (e.g. 1px, bold), was ".$colorwhite;"
        on line 26 of /Users/xxx/src/App.scss
>>   color: tokens.$colorwhite;

有任何想法吗？

编辑：它适用于@import. 我也试过@use... as *但不行。

标签： sass

Answer 1

该@use规则目前仅受Dart Sass支持。你应该@import改用。