gulp-sass @import CSS file

Question

Using gulp-sass I can include .scss files with @import 'filepath.scss';

But when I try to import normal css files with @import 'filepath.css', It just added the import line of import url(filepath.css); to the output css file, rather than actually importing the code.

How can I import CSS files as well as SCSS files? I want to do this to include files form bower.

Here is my gulp function:

// include gulp
var gulp = require('gulp');

// include deps
var minifyCSS  = require('gulp-minify-css'),
    autoprefix = require('gulp-autoprefixer'),
    rename     = require('gulp-rename'),
    sass       = require('gulp-sass');

var targets = {
    css: './output/css'
};

// compile CSS
gulp.task('sass', function() {

    gulp.src([
        './app/assets/scss/app.scss', 
        './app/assets/scss/app-admin.scss'
    ])
    .pipe(sass({
        includePaths: [
            './bower_components/bootstrap-sass-official/vendor/assets/stylesheets', 
            './bower_components'
        ],
        errLogToConsole: true
    }))

    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest(targets.css))
    .pipe(minifyCSS())
    .pipe(rename(function (path) { path.basename += '.min'; }))
    .pipe(gulp.dest(targets.css));
});

For instance I want to include datatables which is at datatables/media/css/jquery.dataTables.css relative to the bower directory as included above.

So in my app.scss file I have @import 'datatables/media/css/jquery.dataTables.css';

If I can't use gulp-sass to do this, how else could I do it?

Answer 1

Passing some parameters to minifyCSS allows me to achieve this.

.pipe(minifyCSS({
        relativeTo: './bower_components',
        processImport: true
    }))

Sources:
gulp-minify-css depends on clean-css, referenced options explained here.