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

Question

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.

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;
}

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;

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;

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.

What am I doing wrong?

nschonni · Accepted Answer · 2020-07-14 03:28:02Z

6

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

answered Jul 14, 2020 at 3:28

nschonni

4,1291 gold badge31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dodilei Over a year ago

I finally found a github issue on this subject yesterday. Thank you for your answer. Do you know why it is not supported yet?

djjeck Over a year ago

You can use the old @import until support is added

Simen L · Accepted Answer · 2021-06-22 08:10:03Z

4

UPDATE: node-sass version 6.0 supports @use

answered Jun 22, 2021 at 8:10

Simen L

4265 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related