Search code examples
gulp-sasslibsassnode-sass

Sass compilation fails when working directory is deeply nested and includePaths is relative

When attempting to import the scss of an npm package using gulp-sass/node-sass/libsass, it fails on

../../app/assets/stylesheets/_engine.scss
Error: File to import not found or unreadable: bootstrap-material-design/scss/core
       Parent style sheet: /Users/kross/projects/acme/app/assets/stylesheets/_engine.scss
        on line 6 of ../../app/assets/stylesheets/_engine.scss
>> @import "bootstrap-material-design/scss/core";
   ^

Versions: 

[email protected]
[email protected]

While investigating this issue, I've narrowed down potential external issues. It doesn't matter which file is substituted in this location, or it's contents (even empty contents), libsass seems to be unable to find the nested @import relative to the path of the found file.

In this case:

  1. includePaths: ['../../node_modules']

  2. Compilation command cd spec/dummy && gulp sass targets application.scss

  3. Structure

Note: it is clear that core is found within the bootstrap-material-design package inside node_modules

dir-structure

It is clear that the nested file _core.scss is found, but that the nested file cannot find a file relative to it.

Also note, that if my cwd is at the root of this project, I _can_compile. Moving the cwd down into spec/dummy and compiling, suddenly this nested relative file is no longer found.

What am I missing here?

Solution

  • I switched the includePaths relative path to a fully qualified path and it works. This appears to be a bug.

    The workaround is to ensure that any passed-in includePaths are fully qualified directory names.

    This gulp-pipeline recipe uses findup to do this:

      options: {
    includePaths: [findup('node_modules')] // find any node_modules above the current working directory and return the fully qualified path
  }