gulp-sass includePaths failing to include vendor scss (possible ordering issue as well)

Question

I have my application sass (in scss files) in various subdirectories within my styles directory, some of which @extend sass styles from various vendors which, (via bower) are in various subdirectories under the vendor directory.

Unfortunately the sass task fails to pick up those vendor scss files and any @extend declarations I have fail as they can't find the sass they're trying to extend from, eg

Error in plugin 'sass'
Message:
    styles/censum/censum.scss
Error: ".graph-row" failed to @extend ".row".
       The selector ".row" was not found.
       Use "@extend .row !optional" if the extend should be able to fail.
        on line 2 of styles/censum/censum.scss

My minimised example is as follows.

gulp.task('sass', function () {
  gulp.src('./styles/**/*.scss')
    .pipe(gulpSass({ includePaths: ['./vendor'] }).on('error', gulpSass.logError));
});

I also tried adding the vendor directories to gulp.src and not using includePaths, eg

gulp.task('sass', function () {
  gulp.src(['./vendor/**/*.scss', './styles/**/*.scss'])
    .pipe(gulpSass().on('error', gulpSass.logError));
});

which does seem to reference the vendor files (as it drags everything in I guess), but I do get failures along the lines of:

Message:
    vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss
Error: Undefined variable: "$btn-primary-bg".
        on line 7 of vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss
$bs-datetimepicker-active-bg: $btn-primary-bg !default;

which is possibly an ordering issue?

Answer 1

What I'm sharing is based on my understanding of your question. I'll discuss it from the perspective of a new project, which seemed to work fine for me.

Let's assume we have a project called sassy and inside it is a package.json file created by running the following:

npm init -y

Then we are going to install Gulp and the SASS component like so:

npm install gulp gulp-sass -save-dev

Inside a Gulpfile.js at the root of our project we have the following code:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp
    .src("./scss/**/*.scss")
    .pipe(sass({includePaths: ['./vendor']}))
    .pipe(gulp.dest("./dist"));
});

As you can probably guess from the above code, we have a vendor directory and a scss directory at the root of our project.

Since I don't know what is in your vendor directory, I've populated mine with randomness. Inside a vendor/colors.scss file I have the following:

.danger {
    color: red;
}

.light {
    color: silver;
}

I also have a nested file found at vendor/sizing/article.scss with the following code:

.title {
    font-size: 22px;
}

Now let's take a look at what is inside my scss directory.

I have a scss/main.scss file with two import statements like follows:

@import "./sidebar/navigation";
@import "./content/blog";

Again, all of this project is randomness. I'm just trying to show the build process from all these files and directories.

I have two more SCSS files in my scss folder. I have a file scss/sidebar/navigation.scss with the following code:

nav {
    padding: 10px;
}

Finally I have a file with a bunch of imports and extends. This file is scss/content/blog.scss and it contains the following:

@import "colors";
@import "sizing/article";

.title {
    @extend .danger;
    @extend .title;
    font-weight: bold;
}

Because the Gulp script is including the vendors directory, we can use relative paths for any of the files. We import the two files from the vendor directory and then extend various classes where necessary.

Running gulp sass will build the CSS files in the project's dist directory. Since I only used scss/main.scss for imports, it will contain all our styles.

Is this what you were trying to do? If yes, run through everything I just shared and see if it works for you.

Answer 2

IncludePaths takes a string array.

Try updating to the following.

gulp.task('sass', function () {
  gulp.src('./styles/**/*.scss')
    .pipe(gulpSass({ includePaths: ['./vendor'] }).on('error', gulpSass.logError));
});

See docs:

https://github.com/sass/node-sass#includepaths