Import several css files into a single file, one by one, rebasing urls and inlining @import
Install with npm.
npm install --save-dev gulp-import-css
Let's say you have assets/reset.css
:
body {margin: 0}
assets/home.css
:
@import url('reset.css');
/* Important: can't be @import 'reset.css' */
.home {font-size: 14px; }
After gulp
you get dist/home.css
:
body {
margin: 0;
}
/* Important: can't be @import 'reset.css' */
.home {
font-size: 14px;
}
This is the Gulpfile.js
:
var gulp = require('gulp');
var importCss = require('gulp-import-css');
gulp.task('default', function () {
gulp.src('assets/home.css')
.pipe(importCss())
.pipe(gulp.dest('dist/'));
});
Now, run the command gulp
to get the combined css file.
MIT @ yuguo