Sass compilation error (underfined variable)

Question

I'm trying to compile a Sass file

The root file looks like this

@use '_colortheme'
@use '_config'
@use '_datepicker'
@use '_main'

In partial _main I'm trying to use variables from _colortheme and _config but get the error for all the variables

Compilation Error
Error: Undefined variable.

I'm new to Sass, have tried @use and @forward in partials, but didn't work. What are the possible reasons for this?

How have you tried to reference the variables? Consider providing an example. — Wongjn, Jul 17 '23 at 07:32

Rok Benko · Accepted Answer · 2023-07-17T13:10:57.007

0

I guess you didn't call the variable correctly using @use. As stated in the official SASS documentation:

You can access variables, functions, and mixins from another module by writing <namespace>.<variable>, <namespace>.<function>(), or @include <namespace>.<mixin>(). By default, the namespace is just the last component of the module’s URL.

Wrong:

_main.scss

@use 'colortheme';

.my-class {
  color: $primary-color;
}

Correct:

_main.scss

@use 'colortheme';

.my-class {
  color: colortheme.$primary-color;
}

edited Jul 17 '23 at 13:10

answered Jul 17 '23 at 09:05

Rok Benko

14,265
2
24
49

The `_` in the import and namespace is not required. – Arkellys Jul 17 '23 at 12:35
@Arkellys Correct, my mistake. I edited my answer. – Rok Benko Jul 17 '23 at 13:00

Sass compilation error (underfined variable)

1 Answers1