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 *但不行。

Answer 1

@use 规则目前仅受 支持飞镖萨斯 .您应该使用 @import 反而。