Dart Sass failed with this error: Undefined variable. SASS

Question

I don't understand what this compile error is describing because I do define the SASS variable:

Dart Sass failed with this error: Undefined variable. ╷ 64 │ color: $sc-blue-light; │ ^^^^^^^^^^^^^^ ╵ _partials/navigation/_search.scss 64:12 @use style.scss 65:1 root stylesheet

_utilities.scss

$sc-blue-light: #5BC2E7;

_search.scss

.search {
color: $sc-blue-light;
}

_style.scss (the main stylesheet)

@use '_partials/base/_utilities';
@use '_partials/navigation/_search';

The utilities are being loaded first, which is what I've read in other answers but it's not applying here. The file paths are correct.

All my other styles compile okay. It's just when I started using variables that this error comes up.

Any thoughts?

Sameer Sameer · Accepted Answer · 2021-05-04T16:19:47

TL;DR

Add @use rule at top of the file in _search.scss too.

With namespace

@use '_partials/base/_utilities';

.search {
 color: utilities.$sc-blue-light;
}

or without namespace

@use '_partials/base/_utilities' as *;

.search {
 color: $sc-blue-light;
}

Quote from official sass

Members (variables, functions, and mixins) loaded with @use are only visible in the stylesheet that loads them. Other stylesheets will need to write their own @use rules if they also want to access them.

and

The simplest @use rule is written @use "", which loads the module at the given URL. Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.

Read about sass @use members
Read about sass @use namespace

Dart Sass failed with this error: Undefined variable. SASS

1 Answers