Sass "Undefined mixin" in CI
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.
sass
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
- Find the file declaring
@mixin flex-center. - Add
@usefor that partial in the file that includes it. - Reference the mixin through its namespace and rebuild.
card.scss
@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.
Related guides
Sass "@import is deprecated" deprecation warning in CIFix Sass "Deprecation Warning: Sass @import rules are deprecated" in CI - dart-sass warns on @import and a st…
Sass "Module loop: ... already being loaded" in CIFix Sass "Module loop: this module is already being loaded" in CI - two stylesheets @use each other, creating…
Sass "legacy JS API is deprecated" in CIFix Sass "The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0" in CI - a tool calls render…