Question

我是一个新人，所以我有这个问题：我用gulp-sass构建我的scss代码，之前一切正常，但现在我需要添加第三方CSS文件来自我的节点模块＆＃39;文件夹（colorbox.css文件），我试图将gulp-cssimport添加到我的gulp-sass任务中：

var gulp = require('gulp');
    scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    cssImport = require("gulp-cssimport");

gulp.task('scss', function () {
  return gulp.src('./src/scss/**/[^_]*.?(s)css')
    .pipe(scss({
        includePaths: [
            'node_modules/slick-carousel/slick',
            'node_modules/jquery-colorbox/example1/'
        ]
    }).on('error', scss.logError))
      .pipe(cssImport())
    .pipe(autoprefixer({
        flexbox: true,
        grid: true,
        browsers: ['> 1%', 'last 5 years', 'Firefox > 20']
    }))
    .pipe(gulp.dest('./src/styles'));
});

并且 - 没有结果=（如何将colorbox.css文件导入我已构建的.css文件中？

Answer 1

您需要合并两者 - 已编译的scss代码和额外的css文件（使用gulp-concat - more info） - 使用merge-stream（more info）。您需要安装两个依赖项（npm install --save-dev gulp-concat-css和npm install --save-dev merge-stream）。

var gulp = require('gulp');
    scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    merge = require('merge-stream');
    concat = require('gulp-concat');

gulp.task('scss', function () {
    var sass, css;

    // You scss compiling routine
    sass = gulp.src('./src/scss/**/[^_]*.?(s)css')
        .pipe(scss({
            includePaths: [
                'node_modules/slick-carousel/slick'
            ]
        }).on('error', scss.logError))
        .pipe(autoprefixer({
            flexbox: true,
            grid: true,
            browsers: ['> 1%', 'last 5 years', 'Firefox > 20']
        }));

    // Add all the external css files
    css = gulp.src('node_modules/jquery-colorbox/example1/colorbox.css');

    // Merge to styles.css and output to src
    return merge(sass, css)
        .pipe(concat('styles.css'))
        .pipe(gulp.dest('./src/'));

});

希望它有所帮助。

gulp-cssimport和gulp-sass

1 个答案: