使用gulp-sass我可以使用@import’filepath.scss’包含.scss文件;
但是当我尝试使用@import’filepath.css’导入普通的css文件时,它只是添加了import url的导入行(filepath.css);到输出css文件,而不是实际导入代码.
如何导入CSS文件以及SCSS文件？我想这样做包括文件形式凉亭.
这是我的gulp功能：
// 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));
});
例如,我想包括相对于上面包含的bower目录的datatables / media / css / jquery.dataTables.css中的数据表.
所以在我的app.scss文件中,我有@import’datatables / media / css / jquery.dataTables.css’;
如果我不能使用gulp-sass这样做,我怎么能这样做？
解决方法
将一些参数传递给minifyCSS允许我实现这一点.
.pipe(minifyCSS({
relativeto: './bower_components',processImport: true
}))
资料来源：
gulp-minify-css取决于clean-css,参考选项解释here.