Node-sass: Not able to build getting error on sass compilation

[jesudasjj]

Hi,
After updating with the latest node-sass 3.5.0
We are getting this error and breaking the build

failed to @extend ".class".

The selector ".class" was not found.
Use "@extend .class!optional" if the extend should be able to fail.

I know, you guys are released latest version 3.5.1, same result.

Let me know, its happening for you guys ?

[mdshaheer]

I am also getting the same issue with the recent build.

[xzyfer]

Please provide a copy/pastable snippet of code that produces this error. Without this we simply cannot help.

[mdshaheer]

.title {
  color: $gray-darker;
  padding: 0;
  @include breakpoint(md) {
    margin-top: -11px;
  }
  a {
    color: $gray-darker;
    text-decoration: underline;
    &:focus {
      color: $gray-darkest;
      text-decoration: none;
      border-bottom: 1px dotted $gray-darkest;
    }
  }
}

.class--name {
  @extend .title;
}

This is what we are doing and it was working till the latest update to 3.5.1. May be we are doing something wrong but any kind of help is really appreciable

[xzyfer]

@mdshaheer your code does not compile. Please provide a fully working sample I can copy and paste. I suggest using http://www.sassmeister.com/

[mdshaheer]

 .title {
  color: #ccc;
  padding: 0;
  a {
    color: #ccc;
    text-decoration: underline;
    &:focus {
      color: #000;
      text-decoration: none;
      border-bottom: 1px dotted #000;
    }
  }
}

.class--name {
  @extend .title;
}

[xzyfer]

I do not see your error, this code compiles to

.title, .class--name {
  color: #ccc;
  padding: 0; }
  .title a, .class--name a {
    color: #ccc;
    text-decoration: underline; }
    .title a:focus, .class--name a:focus {
      color: #000;
      text-decoration: none;
      border-bottom: 1px dotted #000; }

Please provide the output of

npm ls node-sass

[mgreter]

Yep, same here, seems to work as expected !?

[jesudasjj]

this is output [email protected]
@xzyfer, basically it's not from scss, we doubt as it was running smooth earlier(till yesterday).
But now it's started breaking as, It's not recognizing the extend.

[mdshaheer]

for me its [email protected]

[xzyfer]

@jesudasjj I don't understand. We cannot fix an issue we cannot see.

[xzyfer]

@mdshaheer please provide the exact output you see when compiling the exact code you supplied.

[mdshaheer]

I did npm install [email protected] after my npm install which pulls the latest sass version, it started working. In that case do you believe there is some issue with the the sass version?

[mdshaheer]

its a big code with lot of cross references and every instance of @extend is failing.

[markstuart]

I am also seeing the same thing. I installed node-sass 3.4.2 (by way of ember-cli-sass) in a project on our development server a couple of days ago. I have just installed node-sass 3.5.2 in the same project on our staging server (same project, exactly the same git tag) and I cannot build on the staging server.

Output is:

Error: ".support-req-files .spinner" failed to @extend ".primary-font-semi".
The selector ".primary-font-semi" was not found.
Use "@extend .primary-font-semi !optional" if the extend should be able to fail.

I'm sorry I don't have more specific information, but thought it might help to know that the exact same scss file is building under 3.4.2, and failing under 3.5.2

[kevinlambert]

We are having the same issue. Node-sass v3.5.0-beta.1 seem to have introduced the issue and is probably a problem with one of the following libsass releases, 3.3.3, 3.3.4 or 3.3.5.

[jmahony]

Also experiencing problems with @import and @extend

[mdshaheer]

In our case we have reference in package.json to get grunt-sass. In that case anybody know how we can use the older version of node-sass?

[xzyfer]

For everyone in this issue. Node Sass (via LibSass) fixed a lot of bugs around @extend. It's very likely your code is actually invalid Sass that should error, but wasn't erring due to bugs in LibSass. There bugs have since been fixed, causing these issues.

The The selector ".foo" was not found. simply means that you're trying to @extend a selector that doesn't exist. Search your code base for that selector to make sure it

• does exist
• it's defined in the same media query

[xzyfer]

@jmahony this comment is not helpful without copy/pastable sample code.

[markstuart]

Thanks for that information @xzyfer, I'll look into that 👍

[xzyfer]

To all, if you do not give some code I can compile and see your issue myself I simply cannot help you.

If your codebase is large take a couple minutes of your time for comment out parts of your code until you have a small example you can paste here.

[mdshaheer]

@xzyfer the code that I commented earlier was breaking with v3.5.2 but working with v3.4.2

[mdshaheer]

Whether a media query used inside the extended class can also be a reason to fail?

[markstuart]

Thanks again @xzyfer, in my case we had 2 @extends that were referencing rules that didn't exist.

[mdshaheer]

oh that a great input @markstuart, thanks!!!
let me also see.

[kevinlambert]

I can confirm that the errors that occurred were are result of extends not being found. Even though libsass was fixing a bug it is still a breaking change so perhaps node-sass should have released this as a major version as opposed to a minor one. Thanks for the work tho.

[xzyfer]

Node Sass has no way to know that these breakages because we assume valid Sass is being compiled. This is no different to depending on an undocumented API. For that reason we do not consider these breaking changes.

If valid Sass started breaking we would consider that a breaking change. We don't claim responsibility for bugs in the Sass code being compiled.

[mgreter]

Since the point with semver came up a lot lately, here my 2 cents: If we would follow that path very strict, then pretty much every libsass release would be a major release since we pretty much always change some details that can break things for some people. I'm not sure if that would make it any better ...

[mdshaheer]

👍

[xzyfer]

Our current policy of minor version bumps for LibSass updates. Users can lock to a minor with ~ to opt out of future LibSass. However this also means opting out of support from us because the first thing you'll need to do to file a valid bug is update to the latest version.

[greaveselliott]

Hi all.

I'm getting the same issue with the @extend. I tried to rectify the problem by rolling back to my previous version 3.4.2, but I now get the same error message.

Digging deeper into the issue, when I ran grunt -v the compiler says its using:

• node-sass 3.6.0 (wrapper)
• libsass 3.3.6 (Sass Compiler)

even though I have dropped the node-sass version back to 3.4.2.

[xzyfer]

This is probably due to user error. More information in. https://medium.com/@xzyfer/why-node-sass-broke-your-code-and-semver-1b3e409c57b9#.m7y3y5mw3

[wedneyyuri]

@xzyfer As I suggested in https://github.com/sass/libsass/issues/2058 an clearer warning about this change would help all the world a lot. A simple link would be enough.

[xzyfer]

The LibSass release notes list every change with a link to the relevant issue for more information. We also link to LibSass change from the Node Sass chanhelog. There was plenty of warning.

[mlee]

Here's a simple explanation of the issue I experienced:

%colormapping {
  $body-bg: #fff !global;
}

html {
  @extend %colormapping;
}

Before upgrading from 3.4.2, this would successfully expose $body-bg as a global (although it is invalid sass). After upgrading to 3.5.1, this is the error I would see:

"html" failed to @extend "%colormapping".
The selector "%colormapping" was not found.
Use "@extend %colormapping !optional" if the extend should be able to fail.

It appears that the placeholder %colormapping is not executed unless there is a rule defined within it (which is the valid sass behavior), but on 3.4.2 and before it was executing anyways.

[cleversprocket]

I was unable to extend using a silent class that had - in the name. I removed the -s and it worked.