Sass "Undefined variable" - Fix Missing @use Namespace in CI

Sass hit a $variable it has no definition for in scope. Either the file defining it was never loaded, or - most often after migrating from @import to @use - the variable now needs a namespace prefix.

What this error means

The compile fails with Error: Undefined variable. pointing at the $variable usage. It is deterministic and names the using file, line, and the undefined name.

sass output

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

Common causes

Defining file not loaded

The partial that defines $primary is not @used/@imported in this file, so the variable is out of scope.

@use requires a namespace

Unlike @import, @use namespaces members. After migrating, $primary from @use 'variables' must be referenced as variables.$primary (or the file loaded as *).

How to fix it

Reference the variable through its namespace

With @use, prefix members with the module namespace.

SCSS

@use 'variables';
.button { color: variables.$primary; }
// or load into the global scope:
@use 'variables' as *;
.button { color: $primary; }

Load the defining partial

Make sure each file @uses every partial whose members it references - @use scoping is per-file, not global.

How to prevent it

Use explicit namespaces with @use rather than as *.
@use every partial whose variables/mixins a file references.
Compile styles in CI so undefined-variable errors fail before deploy.