gulp-sass @import CSS文件

问题描述

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

Using gulp-sass I can include .scss files with @import 'filepath.scss';

但是当我尝试使用 @import'filepath.css'导入正常的css文件时，它只是添加了 import url（filepath.css ）; 到输出css文件，而不是实际导入代码。

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.

如何导入CSS文件以及SCSS文件？我想这样做包括文件形式bower。

How can I import CSS files as well as SCSS files? I want to do this to include files form bower.

这是我的gulp函数：

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));
});

例如，我想包括 datatables / media / 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.

所以在我的 app.scss

So in my app.scss file I have @import 'datatables/media/css/jquery.dataTables.css';

如果我不能使用gulp-sass来做这件事，我还能怎么做呢？

If I can't use gulp-sass to do this, how else could I do it?

推荐答案

参数minifyCSS允许我实现这一点。

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.

这篇关于gulp-sass @import CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！