Моя задача CSS gulp.js работает неправильно, и я не могу понять, почему

У меня проблема с объединением CSS из NPM Foundation Sites и моего собственного SCSS. По какой-то причине сгенерированный файл CSS включает в себя весь базовый CSS, но не добавляет ничего из моих файлов SASS.

Вот моя задача CSS (с переменными):

var CSS_SOURCE = 'assets/src/scss';
var CSS_DEST = 'assets/dist/css';
var CSS_OUTPUT_FILE = 'main.css';


gulp.task('css', function() {
  gulp.src([
    'node_modules/foundation-sites/dist/css/foundation.css',
    CSS_SOURCE + 'main.scss'
  ])
    .pipe(plumber({
      errorHandler: function(error) {
        console.log(error.message);
    }}))
    .pipe(concat(CSS_OUTPUT_FILE))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest(CSS_DEST + '/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cleanCSS())
    .pipe(gulp.dest(CSS_DEST + '/'))
    .pipe(browserSync.reload({ stream:true }))
});

Вот мой файл main.scss:

@import "custom-settings";
@import "typography";
@import "header";
@import "navigation";
@import "buttons";
@import "main-content";
@import "footer";

Gulp не регистрирует никаких ошибок. Что бы я ни помещал в свои отдельные файлы SASS, ничего из этого не добавляется в конец файла /dist/main.css. Может кто-нибудь пролить некоторый свет на это?


frontend sass gulp gulp-sass
person tmette    schedule 27.02.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Нашел ответ, мне нужно было указать путь для работы импорта в файле main.scss. Мне также нужно было добавить дополнительную косую черту в gulp.src. Вот рабочая задача:

gulp.task('css', function() {
  gulp.src([
    'node_modules/foundation-sites/dist/css/foundation.css',
    CSS_SOURCE + '/main.scss'
  ])
    .pipe(plumber({
      errorHandler: function(error) {
        console.log(error.message);
    }}))
    .pipe(sass({
      includePaths: [
        CSS_SOURCE
      ]
    }))
    .pipe(concat(CSS_OUTPUT_FILE))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest(CSS_DEST + '/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cleanCSS())
    .pipe(gulp.dest(CSS_DEST + '/'))
    .pipe(browserSync.reload({ stream:true }))
});
person tmette    schedule 27.02.2018