There are a few cases where I have to rely on third-party CSS files. I use bower for dependency management and most libraries I require provide their own CSS file that I need to include somewhere in my website/application. Linking the file directly from the HTML is not an option, since this would create an additional HTTP request for each file, besides, I'd like to have all style-related stuff in one place.
Another example is the use of Google Fonts. I don't want to rely on JavaScript for serving custom fonts and linking the file inside my HTML is not an option.
So in both cases I end up using an import-statement like the following:
@import 'http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Open+Sans:400,600,700';
@import '../components/library/lib.css';
Unfortunately, this will be compiled to a classic CSS-Import statement which will also create an additional HTTP request.
I just recently discovered a gulp-plugin that helped me to get around this. It is called gulp-cssimport and basically parses a CSS file, finds imports, grabs the content of the linked file and replaces the import statement with it. Yay - exactly what I wanted :-).
I just added css-import to my build task and got rid of every additional request:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
cssImport = require('gulp-cssimport');
gulp.task('css', function() {
return gulp.src('./scss/**/*.scss')
.pipe(sass({
style: 'compact',
sourcemap: true
}))
.pipe(cssImport())
.pipe(autoprefixer('last 1 version', '> 1%', 'ie 8', 'ie 7'))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({stream:true}));
});
It even works with remote resources like Google Fonts, so Page Speed Insights now has one reason less to yell at me :-).