JavaScript   发布时间:2022-04-04  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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 – gulp-sass @import CSS文件全部内容,希望文章能够帮你解决javascript – gulp-sass @import CSS文件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。