глоток cssimport и глоток sass - PullRequest
Новая
       40

глоток cssimport и глоток sass

0 голосов
/ 23 мая 2018

Я новичок в gulp, поэтому у меня есть такая проблема: я строю свой scss-код с помощью gulp-sass, и раньше все было в порядке, но теперь мне нужно добавить сторонний CSS-файл из моего 'node_nodules'папка (файл 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?

1 Ответ

0 голосов
/ 23 мая 2018

Вам необходимо объединить - скомпилированный код scss и ваши дополнительные css-файлы (используя gulp-concat - больше информации ) - используя merge-stream ( больше информации ).Вам нужно будет установить обе зависимости (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/'));

});

Надеюсь, это поможет.

...