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?
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.