Issues when importing a file that imports other files not relative to the first file

[jkrehm]

I use grunt-sass 1.1.0 that uses node-sass 3.4.2 that uses libsass 3.3.2. Since updating node-sass from 3.4.1 to 3.4.2 (which bumped the libsass version) our builds don't work and I've tracked the problem down to libsass 3.3.2, but my C++ is so rusty that I'm not sure how to fix the issue and submit a pull request.

The scenario: our stylesheet (style.scss) imports bootstrap-sass's _bootstrap.scss. This in turn imports its own files, relative to itself. Those relative files are not found unless I add Bootstrap's directories to the include-path array. I think libsass is looking relative to the initial file, but not relative to the imported files. Font Awesome has the same issue.

I would really rather not include vendor paths in our include-path array, especially since it wasn't required before. Perhaps it's something that was introduced with 610acbf? (e78b314 references that commit as having another relative related issue) Again, my C++ is practically non-existent at this point.

[JohnAlbin]

So… your Sass file has something like this:

// Assuming this file is in project-root/sass.
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";

?

[jkrehm]

Yep. That's not the exact code, but it's close enough to get the idea.

[xzyfer]

I'm unable to reproduce this locally.

|-- test.scss
|-- foo/
  |-- test.scss
  |-- bar/
    |-- test.scss

/* test.scss */
@import "foo/test";

/* foo/test.scss */
@import "bar/test";

/* foo/bar/test.scss */

---

Ruby Sass

/* test.scss */
/* foo/test.scss */
/* foo/bar/test.scss */

LibSass 3.3.2

/* test.scss */
/* foo/test.scss */
/* foo/bar/test.scss */

[jkrehm]

I think I narrowed down the issue to when the include path is something like this: ../www-root.

File layout:

/* www-root/styles/style.scss */
@import "vendor/foo/bar";

/* www-root/vendor/foo/bar.scss */
@import "test";

/* vendor/foo/_test.scss */
body {
    color: #123456;
}

In the tools directory run npm install node-sass. Finally, while in the tools directory run:

node_modules/.bin/node-sass ../www-root/styles/style.scss -o ../www-root/styles/ --include-path ../www-root

With node-sass 3.4.1 it works just fine.

With node-sass 3.4.2 I get the following error:

{
  "formatted": "Error: File to import not found or unreadable: test\n       Parent style sheet: ../www-root/vendor/foo/bar.scss\n        on line 1 of ../www-root/vendor/foo/bar.scss\n>> @import \"test\";\n   ^\n",
  "message": "File to import not found or unreadable: test\nParent style sheet: ../www-root/vendor/foo/bar.scss",
  "column": 1,
  "line": 1,
  "file": "../www-root/vendor/foo/bar.scss",
  "status": 1
}

[jkrehm]

Have you guys been able to reproduce the issue now?

[BT-Wolf-00]

I've been having the same issue where sass files that try to import relative paths no longer work .... I'm using gulp-sass and have had to lock down the old version (2.0.3) to keep things working. We use gulp-sass -> node-sass -> libsass ... and after 2.0.3 of gulp-sass trying to include sass imports (from our bower dir) fail to find any imports that try to use relative paths. Something as simple as Foundation or Ionic sass files (with @import "panel") will fail to resolve... the file is local (in nested bower scss folder) to the current file.

Would love to hear some other thoughts/ideas on how to solve... I can't find any other people talking about this. Using Windows environment.

Thanks!

[BT-Wolf-00]

Can't provide a true sample, but here's the gist:

gulpSass.sass({
includePaths : {
[
'myBowerDirectory/foundation-apps/scss'
]
}
})

Foundation scss file (in this case /foundation-apps/scss/components/_grid.scss) has "@import "panel"".

_panel.scss is available in the same path as _grid.scss. However, with newer versions of libsass this results in "File to import not found".

This worked properly in earlier version of gulp-sass -> node-sass -> libsass

[mgreter]

Should be fixed in master, see #1846