Индивидуальная компиляция файлов SCSS в Gulp

У меня есть список партиалов SCSS, организованный по компонентам, которые я пытаюсь скомпилировать по отдельности с помощью Gulp, но не могу понять, как это сделать.

Вот неполный список файлов, которые я хочу скомпилировать:

_header.scss
_button.scss
_navigation.scss

И я хочу вывести эти файлы в тот же каталог, что и

header.css
button.css
navigation.css

Я использую gulp-sass для компиляции всех моих файлов SCSS в один файл, например:

gulp.task('styles', function() {
  return gulp
    // Find all `.scss` files from the `stylesheets/` folder
    .src('./src/stylesheets/**/*.scss')
    // Run Sass on those files
    .pipe(sass({
      style: 'expanded',
    }).on('error', sass.logError))
    // Write the resulting CSS in the output folder
    .pipe(gulp.dest('build/stylesheets'))
});

Есть ли способ создать отдельную задачу Gulp, которая будет компилировать и выводить каждый файл в каталоге по отдельности, а не объединять их в один файл в конце?

Заранее спасибо.


person procload    schedule 01.06.2017    source источник


Ответы (1)


Вам нужно переименовать частичные файлы, удалив начальное подчеркивание. Обычно Sass не генерирует выходной файл, если имя файла начинается с _xxx.scss.

Документация

Подчеркивание сообщает Sass, что файл является лишь частичным файлом и что его не следует создавать в виде файла CSS.

Вы можете переименовать файл в xxx.scss и по-прежнему импортировать в другие файлы, такие как частичные.

person karthick    schedule 01.06.2017