SASS 'Invalid css error' 当使用来自导入模块的变量时

Question

我是 Sass 的新手，在从部分样式表导入变量时遇到问题。我以为这很简单，但似乎并非如此。

我在 React 组件中使用这个样式表，像这样导入：

import '../stylesheets/Table.scss';

实际的样式表（经过简化，但有同样的错误）如下所示：

@use 'colors.scss';

.datatb-container {

    background-color: colors.$table-bg;
    border: 2px solid colors.$table-border;

    border-radius: 2px;
    padding: 1.2%;
    max-width: 40rem;
}

我的变量所在的文件名为_colors.scss，在与Table.scss相同的目录中，如下所示：

// App colors
$highlight: rgb(197, 145, 0);

// Table colors
$cell-bg: white;
$table-bg: gainsboro;

$cell-border: gray;
$table-border: black;

当我运行 React 时，出现以下错误：

SassError: Invalid CSS after "...ound-color: color": expected expression (e.g. 1px, bold), was ".$table-bg;"
        on line 4 of ./src/stylesheets/Table.scss
>>     background-color: color.$table-bg;

我已经尝试过更改目录、以不同方式使用变量、使用 @use 'colors' as {smth} 更改命名空间，但我总是遇到错误。

我做错了什么？

Answer 1

node-sass（从 v4.14.1 开始）目前不支持 @use，仅在 dart-sass

中可用

Answer 2

更新： node-sass 6.0 版本支持@use

SASS 'Invalid css error' 当使用来自导入模块的变量时

SASS 'Invalid css error' when using variable from imported module

css

sass

reactjs

node-sass