javascript – gulp-sass @import CSS文件

前端之家收集整理的这篇文章主要介绍了javascript – gulp-sass @import CSS文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用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.

猜你在找的JavaScript相关文章