使用导入模块中的变量时，SASS“无效的 css 错误"

问题描述

我对 Sass 真的很陌生，在从部分样式表导入变量时遇到了问题.我认为这很简单，但事实并非如此.

I'm really new to Sass and having problems when importing variables from partial stylesheets. I thought it was pretty straightforward, but it seems not to be the case.

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

I'm using this stylesheet in a react component, importing like this:

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

实际的样式表(经过简化，但有相同的错误)如下所示:

The actual stylesheet (simplified, but with the same error) looks like this:

@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在同一目录下，如下所示:

And the file where my variables are located is called _colors.scss, in the same directory as Table.scss, and looks like this:

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

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

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

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

When I run React, I get the following error:

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} 更改命名空间，但我总是收到错误.

I already tried changing directories, using the variables in different ways, changing the namespace with @use 'colors' as {smth}, but I always get the error.

我做错了什么?

推荐答案

@use 当前在 node-sass 中不受支持(从 v4.14.1 开始)，仅在 dart-sass 中可用

The @use is not currently supported in node-sass (as of v4.14.1) and is only available in dart-sass

这篇关于使用导入模块中的变量时，SASS“无效的 css 错误"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！