gulp-cssimport and gulp-sass

Question

I'm new in a gulp, so I have this issue: I'm building my scss code with gulp-sass and everything was OK before, but now I need to add a third-party CSS file from my 'node_nodules' folder (colorbox.css file) and I've tried to add gulp-cssimport to my gulp-sass task like that:

var gulp = require('gulp');
    scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    cssImport = require("gulp-cssimport");

gulp.task('scss', function () {
  return gulp.src('./src/scss/**/[^_]*.?(s)css')
    .pipe(scss({
        includePaths: [
            'node_modules/slick-carousel/slick',
            'node_modules/jquery-colorbox/example1/'
        ]
    }).on('error', scss.logError))
      .pipe(cssImport())
    .pipe(autoprefixer({
        flexbox: true,
        grid: true,
        browsers: ['> 1%', 'last 5 years', 'Firefox > 20']
    }))
    .pipe(gulp.dest('./src/styles'));
});

And - no result =( What shall I do to import colorbox.css file into my already builded .css file?

Answer 1

You need to merge both - the compiled scss code and your extra css files (using gulp-concat - more info) - using merge-stream (more info). You will need to install both dependencies (npm install --save-dev gulp-concat-css and npm install --save-dev merge-stream).

var gulp = require('gulp');
    scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    merge = require('merge-stream');
    concat = require('gulp-concat');

gulp.task('scss', function () {
    var sass, css;

    // You scss compiling routine
    sass = gulp.src('./src/scss/**/[^_]*.?(s)css')
        .pipe(scss({
            includePaths: [
                'node_modules/slick-carousel/slick'
            ]
        }).on('error', scss.logError))
        .pipe(autoprefixer({
            flexbox: true,
            grid: true,
            browsers: ['> 1%', 'last 5 years', 'Firefox > 20']
        }));

    // Add all the external css files
    css = gulp.src('node_modules/jquery-colorbox/example1/colorbox.css');

    // Merge to styles.css and output to src
    return merge(sass, css)
        .pipe(concat('styles.css'))
        .pipe(gulp.dest('./src/'));

});

Hope it helps.