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?
TL;DR
Add
@use
rule at top of the file in_search.scss
too.With namespace
or without namespace
Quote from official sass
and
Read about sass @use members
Read about sass @use namespace