gulp-cssimport 和 gulp-sass

Question

我是 gulp 的新手，所以我遇到了这个问题：我正在使用 gulp-sass 构建我的 scss 代码，一切都是之前没问题，但现在我需要从我的 'node_nodules' 文件夹（colorbox.css 文件）添加第三方 CSS 文件，我尝试添加 gulp-css像这样导入我的 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) - using 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

gulp-cssimport and gulp-sass

css

sass

gulp

gulp-sass