javascript - gulp-sass @import CSS 文件

Question

使用 gulp-sass 我可以包含 .scss 文件 @import 'filepath.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 来做这件事，我还能怎么做呢？

Answer 1

将一些参数传递给 minifyCSS 可以让我实现这一点。

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

来源:
gulp-minify-css取决于 clean-css , 引用选项解释 here .