0

I have a project which a dependency on Bootstrap. I'm customising the Boostrap variables so using gulp to do a custom compile of Bootstrap's LESS source. The rest of the CSS in my project is written with SASS. I have an imports.sass file which includes the following line:

@import '../bootstrap/compiled/custom-bootstrap';

What I'm trying to do is compile the Bootstrap LESS to CSS, then run a SASS task to create a CSS file which includes the compiled Bootstrap CSS. My 2 gulp tasks which achieve this are as follows:

gulp.task('bootstrap', function () {
    return gulp
        .src('assets/bootstrap/custom-bootstrap.less')
        .pipe(less())
        .pipe(gulp.dest('assets/bootstrap/compiled'));
});

gulp.task('sass', function () {
    return gulp
        .src('assets/scss/*.scss')
        .pipe(sass({
            includePaths: ['assets/bootstrap/compiled']
        }).on('error', sass.logError))
        .pipe(gulp.dest('assets/css'));
});

The first time I run this, the bootstrap task completes successfully, but the sass task throws this error:

Error in plugin 'sass' Message:
    assets\scss\_imports.scss Error: File to import not found or unreadable: ../bootstrap/compiled/custom-bootstrap
       Parent style sheet: [path/to]/assets/scss/_imports.scss
        on line 5 of assets/scss/_imports.scss
>> @import '../bootstrap/compiled/custom-bootstrap';
   ^

When I run it a second time both complete successfully so clearly the problem is the fact that custom-bootstrap.css doesn't exist at the start of the initial run. However, you can see I've added the relevant includePaths option which seems to be the solution for other similar issues elsewhere on SO. Perhaps I'm not specifying this path correctly?

To complete the information you need, here is the structure of my solution detailing the relevant files. I'm confident the paths I've used are correct but just in case I've missed something...

  • assets
    • bootstrap
      • custom-bootstrap.less
      • custom-variables.less
    • scss
      • _imports.scss
      • main.scss
  • gulpfile.js

In case it's relevant, this is the front-end for an ASP.NET solution so I'm using Visual Studio's task runner to execute the gulp tasks, and this also explains why gulpfile.js is in the root of the project.

3rdthemagical
  • 5,271
  • 18
  • 36
Tom Troughton
  • 3,941
  • 2
  • 37
  • 77
  • 1
    Possible duplicate of [How to run Gulp tasks sequentially one after the other](http://stackoverflow.com/questions/22824546/how-to-run-gulp-tasks-sequentially-one-after-the-other) – Sven Schoenung Dec 12 '16 at 09:45
  • Thank you. I wouldn't say this is a duplicate of that question, but the answer in there did solve my problem. Being new to gulp I wasn't aware tasks could be defined in sequence like this. – Tom Troughton Dec 12 '16 at 10:31

0 Answers0