node-sass cannot compile bootstrap4.0.0-beta.2

[pwoosam]

Bootstrap 4 fails to compile

It seems that libsass has an issue with compiling compound ampersands "&".

It looks like the only options are to either use an older version of node-sass or use another sass compiler... Has there really been no fix yet?

Has anyone been able to get bootstrap 4 to compile using node-sass?
Is there a beta version of node-sass that uses an alternative to libsass or an updated libsass that functions properly?

System info

NPM version: 5.6.0
Node version: 9.3.0
Node process:

{ http_parser: '2.7.0',
  node: '9.3.0',
  v8: '6.2.414.46-node.15',
  uv: '1.18.0',
  zlib: '1.2.11',
  ares: '1.13.0',
  modules: '59',
  nghttp2: '1.25.0',
  openssl: '1.0.2n',
  icu: '60.1',
  unicode: '10.0',
  cldr: '32.0',
  tz: '2017c' }

Node Platform: win32
Node architecture: x64
node-sass version:

node-sass       4.7.2   (Wrapper)       [JavaScript]
libsass         3.5.0.beta.2    (Sass Compiler) [C/C++]

npm node-sass versions:

[email protected] C:\Users\PWooSam\P5%20-%20Web%20Front%20End\src\LeadStack
`-- [email protected]
  `-- [email protected]

Input SCSS

@mixin hover {
  // TODO: re-enable along with mq4-hover-shim
//  @if $enable-hover-media-query {
//    // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
//    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
//    @media (hover: hover) {
//      &:hover { @content }
//    }
//  }
//  @else {
    &:hover { @content; }
//  }
}


@mixin hover-focus {
  @if $enable-hover-media-query {
    &:focus {
      @content;
    }
    @include hover { @content; }
  } @else {
    &:focus,
    &:hover {
      @content;
    }
  }
}
...

Resulting error

{ uid: 10,
  name: 'writeBundles',
  branch: false,
  error: Error: Invalid mapping: {"generated":{"line":246,"column":3},"source":"styles/bootstrap/mixins/_hover.scss","original":{"line":12,"column":-27},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (C:\Users\PWooSam\P5%20-%20Web%20Front%20End\src\LeadStack\node_modules\source-map\lib\source-map-generator.js:289:13)
    at SourceMapGenerator_addMapping [as addMapping] (C:\Users\PWooSam\P5%20-%20Web%20Front%20End\src\LeadStack\node_modules\source-map\lib\source-map-generator.js:101:12)
    at C:\Users\PWooSam\P5%20-%20Web%20Front%20End\src\LeadStack\node_modules\aurelia-cli\lib\build\concat-with-sourcemaps\index.js:61:28
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (C:\Users\PWooSam\P5%20-%20Web%20Front%20End\src\LeadStack\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Concat.add (C:\Users\<Username>\P5%20-%20Web%20Front%20End\src\LeadStack\node_modules\aurelia-cli\lib\build\concat-with-sourcemaps\index.js:59:18)
    at work.then (C:\Users\PWooSam\P5%20-%20Web%20Front%20End\src\LeadStack\node_modules\aurelia-cli\lib\build\bundle.js:215:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7),
  duration: [ 1, 939341772 ],
  time: 1513293686334 }
...

[pwoosam]

As of right now, it looks like the only way to get around this error is to either disable source maps for sass files that have these issues with compound selectors.

If you must have source maps, then ruby-sass is an option. The only issue being that you need to install Ruby and the Sass gem for Ruby in order to get it to work.

[fkleuver]

Looks like this is fixed in libsass.

[mrDinckleman]

A new version of LibSass was released

[modosc]

i think this is the actual change: https://github.com/sass/libsass/commit/6892bf502eb8346f66d7d730eec823fd9a08e401

but node-sass is using the 3.5.0-beta branch of node-sass which doesn't seem to be getting backports actively. would a pr that cherrypicked this fix be accepted here?

[jrsinclair]

Would love to see this one sorted.

[xzyfer]

Fixed in 4.8.0