Bootstrap 4 scss doesn't bundle when built/compiled

I’m submitting a bug report

• Library Version: 0.32.0

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 9.3.0

• NPM Version: 5.6.0

• Language: SCSS

• Loader/bundler: RequireJS

Current behavior:

C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak>au runStarting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'buildTypeScript'
Finished 'processCSS'
Starting 'writeBundles'...
Tracing app...
Tracing environment...
Tracing main...
Tracing resources/index...
Tracing app...
Tracing app...
Tracing aurelia-binding...
Tracing aurelia-bootstrapper...
Tracing aurelia-dependency-injection...
Tracing aurelia-event-aggregator...
Tracing aurelia-framework...
Tracing aurelia-history...
Tracing aurelia-history-browser...
Tracing aurelia-loader-default...
Tracing aurelia-logging-console...
Tracing aurelia-pal-browser...
Tracing aurelia-route-recognizer...
Tracing aurelia-router...
Tracing aurelia-templating-binding...
Tracing aurelia-templating-resources...
Tracing aurelia-templating-router...
Tracing aurelia-testing...
Tracing text...
ERROR [Bundle] Failed to write the bundle
INFO [Bundle] Error: Invalid mapping: {"generated":{"line":243,"column":3},"source":"../node_modules/bootstrap/scss/mixins/_hover.scss","original":{"line":12,"column":-27},"name":null}
{ uid: 10,
  name: 'writeBundles',
  branch: false,
  error: Error: Invalid mapping: {"generated":{"line":243,"column":3},"source":"../node_modules/bootstrap/scss/mixins/_hover.scss","original":{"line":12,"column":-27},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-generator.js:289:13)
    at SourceMapGenerator_addMapping [as addMapping] (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-generator.js:101:12)
    at C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\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\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Concat.add (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\aurelia-cli\lib\build\concat-with-sourcemaps\index.js:59:18)
    at work.then (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\aurelia-cli\lib\build\bundle.js:215:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7),
  duration: [ 1, 559022449 ],
  time: 1513300878807 }
{ uid: 1,
  name: '<series>',
  branch: true,
  error: Error: Invalid mapping: {"generated":{"line":243,"column":3},"source":"../node_modules/bootstrap/scss/mixins/_hover.scss","original":{"line":12,"column":-27},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-generator.js:289:13)
    at SourceMapGenerator_addMapping [as addMapping] (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-generator.js:101:12)
    at C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\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\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Concat.add (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\aurelia-cli\lib\build\concat-with-sourcemaps\index.js:59:18)
    at work.then (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\aurelia-cli\lib\build\bundle.js:215:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7),
  duration: [ 3, 786554803 ],
  time: 1513300878809 }
{ uid: 0,
  name: '<series>',
  branch: true,
  error: Error: Invalid mapping: {"generated":{"line":243,"column":3},"source":"../node_modules/bootstrap/scss/mixins/_hover.scss","original":{"line":12,"column":-27},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-generator.js:289:13)
    at SourceMapGenerator_addMapping [as addMapping] (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-generator.js:101:12)
    at C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\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\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Concat.add (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\aurelia-cli\lib\build\concat-with-sourcemaps\index.js:59:18)
    at work.then (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\aurelia-cli\lib\build\bundle.js:215:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7),
  duration: [ 3, 789008472 ],
  time: 1513300878810 }
Error: Invalid mapping: {"generated":{"line":243,"column":3},"source":"../node_modules/bootstrap/scss/mixins/_hover.scss","original":{"line":12,"column":-27},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-generator.js:289:13)
    at SourceMapGenerator_addMapping [as addMapping] (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-generator.js:101:12)
    at C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\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\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Concat.add (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\aurelia-cli\lib\build\concat-with-sourcemaps\index.js:59:18)
    at work.then (C:\Users\PWooSam\pwoosamtest\auBootstrap4SCSSMinBreak\node_modules\aurelia-cli\lib\build\bundle.js:215:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)

• What is the expected behavior? The scss should compile to css, everything should bundle, and the Aurelia app should launch

To reproduce:

1. Clone this minimal aurelia project: https://github.com/pwoosam/auBootstrap4SCSSMinBreak
2. run npm install
3. run au run

Does anyone know what is going on? Is the problem libsass? Has anyone gotten bootstrap4 working with scss on aurelia?

[3cp]

I think there is no more issue now. @EisenbergEffect this can be closed.

[pwoosam]

@jaceenet The error is related to libsass. Basically, the source map generated by libsass does not match up with the resulting CSS due to a bug in the implementation.

This error goes away if you disable source maps for your SASS files in /aurelia_project/tasks/process-css.js or you could disable source maps all together if you wanted in /aurelia_project/aurelia.json.

Alternatively, you could use gulp-ruby-sass to process your CSS, rather than gulp-sass. That way, you still have source map support. But you do have to install Ruby and the Sass gem in order to get it working.