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

Question

.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.

Answer 1

@extend warning were introduced in Sass 3.2.0 (changelog):

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.