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.

Answer 2

gulp-cssimport is a good choice if you also want css imports to work in non-minified development environments.

Answer 3

Quite often this is solved simply by listing all the files in the HTML file like so:

<!-- 'vendor' styles -->
<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="some/other/plugin.css"/>
<!-- refernce to the SCSS compilation output -->
<link rel="stylesheet" href="styles/main.css"/>

I suppose this will have the downside of not being able to refernce to the classes defined in the 'vendor' CSS files from the SCSS files for example with @extend directive (I haven't had the need to do so). Other than that, I don't think there's any functional reason why it could not be done this way since it is not possible to define variables, mixins or other reusable blocks of style in the css files.

However, many want to combine the CSS files into one css file because of two reasons:

1. Minimizing the amount of files needed to load (=the amount of HTTP requests) will speed up the page loading time
2. Using a css opitmiser (such as csso) can find overlaps from the one monolithic CSS file and this the omptimization might be more efficient.

To achieve this, gulp-useref is often used. To do so, the HTML needs to have special coments surrounding the stylesheets references:

<!-- build:css styles/combined.css -->
<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="some/other/plugin.css"/>
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->

The magic comments above instruct useref to concatenate the CSS files referenced between the comments to a file named styles/combined.css. Of course, for this to happen, you'll need to instruct the usage of useref in your gulpfile, something like this:

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    gulpif = require('gulp-if'),
    csso = require('gulp-csso');

gulp.task('html', function () {
    var assets = useref.assets();

    return gulp.src('app/*.html')
        .pipe(assets)
        .pipe(gulpif('*.css', csso()))
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

Note that the SCSS files need to be compiled first for this to work.

One of the reasons of doing it this way is that the processing time required to get a viewable HTML page with working CSS when developing is minimized. That is, after you've made modifications to your SCSS files, the only thing that gulp needs to do to be able to display the changes is to compile the SCSS files, as the CSS references between the 'magical comments' will work as such. If you use browserSync to view the changes after save, this will help minimize the lag for the changes to be displayed in your browser(s). Only 'compiling for production' you need to use 'gulp-useref'.

I recommend taking a look at some of the Slush or Yeoman generators, or rather the code they generate. At least the Yeoman generator 'gulp-webapp' seems to use useref. Even if you don't want to use the generators, their output serves as a good recipe book for discovering best practices (assuming the generator in question is well made).

Answer 4

i just rename my "filename.css" to "filename.scss" and @import "filename"; without file extension.