How can I make gulp-sass look for the _*.scss file first and then the directory with the index file?

Question

Sass

Hello.
Given: Laravel project, gulp, yarn.
I want to collect tabler.io styles (beautiful theme on top of bootstrap).

Task in gulp:

/**
 * Tabler
 */
gulp.task('tabler', function(done) {
  gulp.src('./node_modules/@tabler/core/src/scss/tabler')
    .pipe(sass({
      importer: tildeImporter
   	 }).on('error', sass.logError))
    .pipe(cleanCSS({compatibility: 'ie8'}))
  .pipe(rename('dashboard.min.css'))
  .pipe(gulp.dest(path.build.css));
  return done();
});

When I try to build, it gives an error

Error in plugin "sass"
Message:
    node_modules/@tabler/core/src/scss/_bootstrap-config.scss
Error: File to import not found or unreadable: /home/test/site/node_modules/@tabler/core/node_modules/bootstrap/scss/mixins/index.
        on line 3 of node_modules/@tabler/core/src/scss/_bootstrap-config.scss
        from line 7 of node_modules/@tabler/core/src/scss/_config.scss
        from line 1 of node_modules/@tabler/core/src/scss/_tabler-core.scss
        from line 1 of node_modules/@tabler/core/src/scss/tabler.scss
        from line 2 of resources/assets/scss/tabler.scss
>> @import "~bootstrap/scss/mixins";

The problem is that instead of

/home/test/site/node_modules/@tabler/core/node_modules/bootstrap/scss/_mixins.scss

it tries to find the file

/home/test/site/node_modules/@tabler/core/node_modules/bootstrap/scss/mixins/_index.scss

, which is not.

What am I doing wrong?

Answer 1

gulp-sass looks for a file called index. Try to write the full path, or here's a customized package for you, just customize it for yourself:
gulp.task('styles', function(){
return gulp.src("src/sass/*.+(scss|sass)")
. pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(rename({
prefix: "bonjour-",
suffix: "-hola",
}))
.pipe( autoprefixer({
cascade: false
}))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest("src/css"))
.pipe(browserSync. stream());
});