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?