'Shows Error - failed to extend when a class is extended in SASS

.class{
  color:#333;
}

.ex-class{
 @extend .class;
}

Shows error:

".ex-class" failed to extend ".class"
The selector ".class" was not found.
This will be an error in future releases of Sass
Use "@extend .class !optional" if the extend should be able to fail

What makes me in trouble, Sass is compiled fine on all other git Repos on my system, I tried by changing the Sass versions, My team member works fine with this Sass and same version.

csssasscompass


Solution 1:[1]

@extend warning were introduced in Sass 3.2.0:

Any @extend that doesn't match any selectors in the document will now print a warning. These warnings will become errors in future versions of Sass. This will help protect against typos and make it clearer why broken styles aren't working.

In Sass 3.3.0, it stop to warn the user, simply throwing an error:

Sass will now throw an error when an @extend that has no effect is used. The !optional flag may be used to avoid this behavior for a single @extend.

Please note that @extend has been subject to many bug fix in Sass history (3.1.13, 3.2.5, 3.2.6, 3.2.8 and 3.2.9), and that particularly when it's used with media queries. I would recommend you and your team to use at least Sass v3.3.0.

If your code if written "as it", you shouldn't have any error/warning. If you're using @import, or if the block is wholly/partly written inside a media query, there could have issues.

Solution 2:[2]

I've got the same problem:

document [name="variable"]" failed to @extend "%variableSCSS".
The selector "%variableSCSS" was not found.
Use "@extend %variableSCSS !optional" if the extend should be able to fail.
_styles.scss

The problem was solved using @import variableSCSS.scss in _styles.scss

_variableSCSS.scss is the document which contains "%variableSCSS {...}". So check if your @imports are correctly called on the classes you are using them.

Solution 3:[3]

If you're using @import then check the permissions of the included files extension. It must be .scss

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 M.Garcia
Solution 3 AlekseyShavrak

Related Questions