Unable to include library using the importPaths property

[FabianMeul]

Hi,

I'm unable to successfully compile my scss files while including an external library.
I can't seem to figure out the correct path for including my library.

When I don't include a library, the scss files compile just fine.

A simplified example:

Gulp task

// Source
    var source = config.builds.dev.dir + "assets/scss/**/*.scss";
    var destination = config.builds.dev.dir + "assets/css/";

    // Sass options
    var options = {
        outputStyle: "expanded",
        includePaths: [
            // Include bower packages as a souce for @import statements
            "public/dev/app/bower_components"
        ]
    };

return gulp.src(source)
        .pipe(sourcemaps.init())
        // Compile sass
        .pipe(sass(options))
        // Autoprefix the generated CSS file
        .pipe(autoprefixer("last 3 versions"))
        .pipe(sourcemaps.write("sourcemap", sourcemapOptions))
        // Save CSS files
        .pipe(gulp.dest(destination))
        .on("error", gutil.log);

SASS file

@import 'susy';
...
...

Simplified folder structure

public/dev/assets/scss
public/dev/app/bower_components
node_modules
Gulpfile.js

Error

Error: public/dev/assets/scss/styles.scss
Error: File to import not found or unreadable: susy
       Parent style sheet: stdin
        on line 23 of stdin
>> @import 'susy';

Could someone point me in the right direction on what I'm doing wrong?

[sundriver]

+1 I have the same issue with bootstrap-sass

styles.scss file contains:
@import "boostrap";
....

and gulpfile.js contains:

.pipe(sass({
style:'compressed',
includePaths:[
config.bowerDir + '/bootstrap-sass/assets/stylesheets',
config.bowerDir + '/fontawesome/scss',
]}).on("error", sass.logError ))

Error in plugin 'sass'
Message:
src\css\styles.scss
Error: File to import not found or unreadable: boostrap
Parent style sheet: stdin
on line 1 of stdin

@import "boostrap";
^

[name-k]

+1, same problem with imports in .scss, but it does not always throw an error. Sometimes it is compiled, sometimes ends with error. Error messages looks pretty much the same.

[jkrehm]

My bet is this is the same issue that I've had with libsass. See #1750 and #1846. I haven't had a chance to pull master and compile it to try, but supposedly it's fixed in master.

[first-wanderer]

+1
Also, error occurs when importing custom files
Message:
src\style\style.scss
Error: File to import not found or unreadable: components/modules/index-content.scss
Parent style sheet: stdin
on line 19 of stdin

@import "components/modules/index-content.scss";
^

Details:
formatted: Error: File to import not found or unreadable: components/modules/index-content.scss
Parent style sheet: stdin
on line 19 of stdin

@import "components/modules/index-content.scss";
^

column: 1
line: 19
file: stdin
status: 1
messageFormatted: src\style\style.scss

Error: File to import not found or unreadable: components/modules/index-content.scss
Parent style sheet: stdin
on line 19 of stdin

@import "components/modules/index-content.scss";
^

[FabianMeul]

@jkrehm : This issue is not resolved when using the current 3.5.0-beta.1 of node-sass (which implements the latest libsass 3.3.3 release).

Thus this issue remains... Does anyone have any suggestions at all on what could be the solution to this issue?

[FabianMeul]

Ok, an update!

As we know, this doesn't work:

// Sass options
    var options = {
        outputStyle: "expanded",
        includePaths: [
            // Include bower packages as a souce for @import statements
            buildHelper.bowerConfig().directory + "susy/sass/"
        ]
    };

After some digging into which paths are actually included, I figured out that an absolute path is actually expected:

var options = {
        outputStyle: "expanded",
        includePaths: [
            // Include bower packages as a souce for @import statements
            __dirname + "/" + buildHelper.bowerConfig().directory + "susy/sass/"
        ]
    };

Using the snippet above, I'm able to successfully compile my SASS.
__dirname is replaced by the absolute path of the current file.

[xzyfer]

As reported includePaths should be absolute.