Sass "Undefined mixin" in CI

By Kaveh Alemi·Latchkey

Sass evaluates @include name(...) by looking up a mixin defined with @mixin name. "Undefined mixin" means no such mixin is in scope, usually because the partial that defines it was not imported in the entry file.

What this error means

The Sass build fails with "Error: Undefined mixin." pointing at the @include line in a .scss file.

Error: Undefined mixin.
  +-> src/styles/card.scss
   |     @include flex-center;
   |     ^^^^^^^^^^^^^^^^^^^^^

Common causes

The partial defining the mixin was not imported

The file using @include does not @use or @import the partial where the mixin is declared, so it is out of scope.

A namespace mismatch under @use

With @use 'mixins', members are namespaced (mixins.flex-center); calling the bare name without the namespace is undefined.

How to fix it

Import the partial that defines the mixin

1. Find the file declaring @mixin flex-center.
2. Add @use for that partial in the file that includes it.
3. Reference the mixin through its namespace and rebuild.

@use 'mixins';
.card { @include mixins.flex-center; }

Match the call to the @use namespace

If you @use 'mixins' as m;, call m.flex-center. Bare names only work after @import, which is being phased out.

How to prevent it

• Import (@use) the partials whose mixins a file references.
• Call namespaced members with their namespace prefix under @use.
• Compile Sass in CI so missing imports fail the PR.

Frequently asked questions

Related guides

References

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