Undefined selector warning during @extend compilation

Question

Sass Selector InheritanceThe @extend directive is designed to allow a selector to inherit rules from another existing selector, merging them into a single rule in the final CSS output. However, the compiler behavior varies when the target selector is not defined within the same stylesheet or is missing from the current scope.Scope and Compilation ConstraintsWhen using @extend, the target selector must be defined prior to the extension call. If the compiler cannot locate the referenced selector, it may trigger a compile warning rather than a hard error, potentially leading to silent failures where styles are not applied to the intended elements.Technical UncertaintyIn modern Sass versions, specifically when utilizing @use for module scoping, the visibility of placeholder selectors (%.example) across different partials is restricted. This creates uncertainty regarding how the compiler handles extensions of placeholders that are defined in a module but not explicitly exported or accessible to the extending file.Does the Sass compiler treat an undefined placeholder selector differently than an undefined standard CSS selector during @extend?What is the specific mechanism for verifying that a cross-module extension has failed silently versus being successfully compiled?

Tasadduq Burney · Answer

Why the warning appears
The Sass compiler emits an "undefined selector" warning when the selector referenced in @extend cannot be found in the current compilation scope.
Confirmed facts
Under the modern @use module system, selectors are scoped to their module and must be accessed with the module's namespace (e.g., @extend utils.%button). If the namespace is omitted or the module is not loaded, the target is treated as undefined, triggering the warning. This behavior is the same for placeholder selectors (%.name) and regular class or element selectors.
Steps to resolve

Load the module that defines the target selector with @use 'path/to/module'; at the top of the file.
  Reference the selector using the module's namespace, for example @extend module-name.%placeholder or @extend module-name .class.
  Ensure the @use statement precedes the @extend line; the module system handles ordering automatically, but keep the import before any extension.

Are you using the legacy @import syntax or the modern @use/@forward module system? This determines whether the namespace prefix is required.

Undefined selector warning during @extend compilation

Sass Selector Inheritance

Scope and Compilation Constraints

Technical Uncertainty

1 answer

Why the warning appears

Confirmed facts

Steps to resolve

Your perspective belongs here.

0 question comments