Gulp-sass: IncludePaths not working

[michaelcarter]

I can't get includePaths working on version 2.3.2 of gulp-sass and 4.4.2 of node.

Here's my gulpfile contents:

const SASS_FILES = ['./code/styles/main.scss'];
const SASS_INCLUDE_PATHS = [
  path.join(__dirname, '/node_modules/normalize-scss/sass/'),
  path.join(__dirname, '/node_modules/bourbon/app/assets/stylesheets/'),
  path.join(__dirname, '/node_modules/bourbon-neat/app/assets/stylesheets/'),
  path.join(__dirname, '/node_modules/susy/sass/')
];

gulp.task('styles', function() {
  return gulp.src(SASS_FILES)
    .pipe(sass({ includePaths: SASS_INCLUDE_PATHS }))
    .pipe(gulp.dest(BUILD_DEST));
});

The task runs without error, and scss files I have within ./code/styles/ are pulled in just fine, but it seems the includePaths imports are completely ignored. If I strip my main.scss back to the following, for example:

@import 'normalize';
// @import 'bourbon';
// @import 'neat';
// @import 'susy';

My output is a completely blank file.

Interestingly, if I import bourbon and neat I do get _something_ in my output, just not what I'd expect:

html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

Importing susy, again, yeilds no extra css added to the output.

Any advice anyone could offer would be much appreciated.

[xzyfer]

Does it work if use var/let instead of const for the include paths variable?

[michaelcarter]

@xzyfer No, I'm afraid not. :(

[xzyfer]

Can you check if there is any error output with

gulp.task('styles', function() {
  return gulp.src(SASS_FILES)
    .pipe(sass({ includePaths: SASS_INCLUDE_PATHS }).on('error', plugins.sass.logError))
    .pipe(gulp.dest(BUILD_DEST));

Also can you confirm whether you have this issue with 2.3.1?

[michaelcarter]

@xzyfer Doing what you suggested there I get no error output, and I have the same issue on 2.3.1 I'm afraid.

[xzyfer]

I have the same issue on 2.3.1 I'm afraid.

This is good to know. We made a change to how we handle the options object in 2.3.2 so it's good to rule out that change.

Can you triple check your include paths are correct? Try replacing the path.join with a hard coded absolute path.

[frosit]

@michaelcarter Switching from node_modules to bower dependencies will solve your problem. I don't know why, my guess is some restriction thing. I have a setup working like a charm, all bower dependencies. When trying to include your node dependencies i get the same problems, paths are correct but won't load. Give it a try! They're all available in bower.

The bower dependency however is a little different, for the example case i copied the sass folder from normalize-scss to the bower dependency of normalize-scss. Just to show you it's not the files or the paths. Then this works for me.

const SASS_INCLUDE_PATHS = [
    path.join(__dirname, '/bower_components/normalize-scss/sass')
];

gulp.task('sass', function () {
    return gulp.src(sassDir)
        .pipe(sourcemaps.init()) 
        .pipe(sass({
            includePaths: SASS_INCLUDE_PATHS
        }).on('error', sass.logError))
        .pipe(sourcemaps.write()) 
        .pipe(gulp.dest(path_css))
        .pipe(browserSync.stream());
});

So it must be a restriction thing, otherwise im clueless too but it works.

bower install normalize-scss

goodluck!

[fredericpfisterer]

I also have an issue using includePaths. I'm using bower dependencies.

includePaths: ['bower_components/normalize-scss/sass']

Any ideas ?

[fredericpfisterer]

I also tried with node-sass directly and it does not work either :

node-sass --include-path ./bower_components/normalize-scss/sass/ assets/scss/main.scss test.css

[frosit]

It worked for me, npm version 3.9.5,. bower version 1.7.9, gulp version 3.9.1. If it's not working i could check my setup again tonight, might be able to share it with you for you to debug. It's part of my openly available project on github so sharing won't be a problem. That something you would be interested in? @fredericpfisterer

[fredericpfisterer]

I have :
npm 2.15.5
bower 1.7.9
gulp 3.9.1
node 4.4.5
node-sass 3.8.0
libsass 3.3.6

[frosit]

Worth a try to update your npm: https://docs.npmjs.com/how-npm-works/npm3

Here's the instructions https://docs.npmjs.com/getting-started/installing-node

[lunelson]

I'm having this problem too. I tried using the path module to resolve the paths, like this

sassPaths = [path.resolve('node_modules')];

but of course this doesn't work either and the documentation seems to suggest relative paths would work anyway. I am also on node 4, npm 2; and I've just switched away from npm 3 because I had a bunch of other things breaking under that

potentiall related to https://github.com/sass/node-sass/issues/1616

[fredericpfisterer]

I tried updating to npm 3 and it does not work. I have another project using foundation that need includePaths and everything works fine there. I can't spot any differences in the way I'm using it :-(

[lunelson]

Yes I also just tried switching to node 5 / npm 3 just to see if that would do it, but no

[fredericpfisterer]

What is weird is that I am calling to different scss files :

@import "../../bower_components/susy/sass/_susy.scss"; @import "../../bower_components/normalize-scss/sass/_normalize.scss";

susy works perfectly without any includepaths and normalize does not (with or without includepaths).

[fredericpfisterer]

nevermind, I fixed it. It is because normalize scss needs @include normalize();

[refactorized]

Is there a way to get include issues to throw errors? I am using the error handler but not getting anything. I am fairly certain there are just issues with my paths, but it's hard to tell flying blind.

[majabee]

node: v7.2.1
npm: 4.0.5
gulp: 3.9.1
gulp-sass: 3.0.0
node-sass: 4.1.1

I have the same problem, include path does not work at all.
my gulpfile.js:

gulp.task('sass', function () {
 return gulp.src(filepath.srcstyles + '**/*.scss')
   .pipe(sass({includePaths: './src/core/scss'}))
   .pipe(extname())
   .pipe(gulp.dest(filepath.deststyles));
});

when i run gulp I get this error message:
events.js:160
throw er; // Unhandled 'error' event
^
...
Error: File to import not found or unreadable: /core/foundation/util/util.
Parent style sheet: /Users/x/Documents/sites/projects/gulptest/src/scss/settings.scss
on line 43 of src/scss/settings.scss

@import '/core/foundation/util/util';
^
at options.error (/Users/x/Documents/sites/projects/gulptest/node_modules/node-sass/lib/index.js:286:26)

[byronwong-dev]

@majabee Can you show what is the tree view of your working directory? The problem here seems like gulp could not find your path /core/foundation/util/util

[majabee]

You are right, I'm so sorry it was an - it was a path problem. Works now!

[iamchriswick]

Im running

• n'ode: v6.9.3
• npm: 3.10.10
• gulp cli version: 1.2.2
• gulp local version: 3.9.1
• gulp-sass: ^2.1.0

My issue

Setting includePaths does not seem to affect my code at all, but my biggest concern is that some of the styles imported to styles.scss does not import at all. Is there a limit to the amount of files and code that can be imported and/or is there a timeout on the build?

You can view my project at https://github.com/iamchriswick/Intense-Job-Board-Template

[benkim0414]

I also have this issue.

includePaths doesn't work in my project.

import gulpLoadPlugins from 'gulp-load-plugins';
const $ = gulpLoadPlugins();

gulp.task('styles', () => {
  return gulp.src([
    'app/sass/**/*.scss',
    'app/sass/**/*.css'
  ])
    .pipe($.newer('.tmp/css'))
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      precision: 10,
      includePaths: [
        `${__dirname}/node_modules/material-components-web`,
        `${__dirname}/node_modules/@material`
      ]
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('.tmp/css'))
    // Concatenate and minify styles
    .pipe($.if('*.css', $.cssnano()))
    .pipe($.size({title: 'styles'}))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest('static/css'))
    .pipe(gulp.dest('.tmp/css'));
});

It always makes this error

Error in plugin 'sass'
Message:
    app/sass/admin.scss
Error: File to import not found or unreadable: material-components-web/material-components-web
       Parent style sheet: /Users/gunwoo/workspace/josef/app/sass/admin.scss
        on line 1 of app/sass/admin.scss
>> @import 'material-components-web/material-components-web';

[n1kt0]

in my case gulp-sass finds the path but can't include any mixins from susy for e.g.

[Yugloocamai]

I'm having the same issue here. Gulp-sass completely ignores the includePaths. All @imports are totally ignored.

[n1kt0]

I think I've found the problem. Due to the release of susy 3 the NPM package contains the new version 3.0 which is completely redesigned and most of the garbage was removed, that's why you can't find the mixins which were there before. In BOWER however a version number of 2 and something is installed which contains all the stuff you are searching for but it is obsolete.

[xzyfer]

I'm certain includePaths are working as intended. Each issue appears to have a different root cause related to the authored @import being incorrect. I'm closing a locking this issue to prevent more unrelated "me too"s.

Please open a new issue if you encounter related issues.