title: gulp-sass @import CSS file
body: <p>Using gulp-sass I can include .scss files with <code>@import 'filepath.scss';</code></p>
  
  <p>But when I try to import normal css files with <code>@import 'filepath.css'</code>, It just added the import line of <code>import url(filepath.css);</code> to the output css file, rather than actually importing the code. </p>
  
  <p>How can I import CSS files as well as SCSS files? I want to do this to include files form bower. </p>
  
  <p>Here is my gulp function:</p>
  
  <pre><code>// 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));
  });
  </code></pre>
  
  <p>For instance I want to include datatables which is at <code>datatables/media/css/jquery.dataTables.css</code> relative to the bower directory as included above.</p>
  
  <p>So in my <code>app.scss</code> file I have <code>@import 'datatables/media/css/jquery.dataTables.css';</code></p>
  
  <p>If I can't use gulp-sass to do this, how else could I do it?</p>