gulp-sass @import CSS文件

Question

使用gulp-sass我可以包含.scss文件 @import 'filepath.scss';

但是当我尝试导入普通的css文件时@import 'filepath.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));
});

例如,我想包括datatables/media/css/jquery.dataTables.css相对于上面包含的凉亭目录的数据表.

所以在我的app.scss文件中我有@import 'datatables/media/css/jquery.dataTables.css';

如果我不能使用gulp-sass这样做,我怎么能这样做？

Answer 1

将一些参数传递给minifyCSS允许我实现这一点.

.pipe(minifyCSS({
        relativeTo: './bower_components',
        processImport: true
    }))

来源:
gulp-minify-css取决于clean-css,这里引用的引用选项.

Answer 2

如果您还希望css导入在非简化的开发环境中工作,那么gulp-cssimport是一个不错的选择.