Sass "Undefined variable" - Fix in CI

By Daniel Zoghalchali·Latchkey

Sass reached a $variable it has no value for. Either the partial that defines it was never loaded, or it now lives behind a @use namespace and the bare name no longer resolves.

What this error means

Compilation fails with SassError: Undefined variable. pointing at the $name usage. Often appears right after migrating @import to @use.

SassError: Undefined variable.
  ╷
8 │   color: $primary;
  │          ^^^^^^^^
  ╵
  src/styles/button.scss 8:10  root stylesheet

Common causes

Variable partial not loaded

The file using $primary never @uses or @imports the partial that defines it.

Missing @use namespace

With @use 'variables', members are namespaced - $primary must be variables.$primary unless you @use 'variables' as *.

How to fix it

Load the partial and namespace the member

1. Add the @use at the top of the file.
2. Reference the variable through its namespace.

@use 'variables';

.button { color: variables.$primary; }

Import all members into scope

1. When you want the legacy bare-name behavior, alias the module to *.

@use 'variables' as *;

.button { color: $primary; }

How to prevent it

• Standardize on @use with explicit namespaces across the codebase.
• Keep shared variables in one entry partial that every component loads.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation