Gulp SASS не компилирует изменения @import - PullRequest
Новая
       32

Gulp SASS не компилирует изменения @import

0 голосов
/ 27 января 2019

Мы запускаем Gulp 4 и имеем один основной файл scss, который извлекается частично через @import.Например: app.scss, а app.scss содержит одну строку @import "partials/_mypartial.scss";.

У нас также есть запущенная задача под названием styles, которую мы в данный момент выполняем вручную через gulp styles, когда решаем эту проблему.

Проблема в том, что если мы внесем изменениенепосредственно к app.scss, так как мы добавляем больше @import частичек или обновляем комментарии в файле, gulp-sass работает отлично и компилирует файл .css, как и предполагалось.

Однако, если всемы обновляем это частичный файл (и ничего не меняется в app.scss), т. е. миксин или объявление gulp-sass не извлекает обновления при запуске задачи styles.

Что в итоге происходитфайл css создан и помещен в каталог dest с той же отметкой времени, что и при последней "обработке" app.scss, но без изменений, внесенных в частичный файл.

Мы не говорим gulp-sass для кеширования чего-либо и использует настройки по умолчанию.Есть идеи, почему это происходит при обновлении ТОЛЬКО частичного файла?

Структура каталогов:

/assets/src/scss/app.scss
/assets/src/scss/partials/_mypartial.scss

app.scss Содержимое: @import "partials/mypartial";
_mypartial.scss content: .row { margin-left: -35px; }

ПРИМЕЧАНИЕ. Это тестовые файлы для устранения проблемы.Если все, что мы делаем, это касаемся _mypartial.scss, т. Е. Меняем поле слева до какого-то другого значения, запуск gulp style вручную не принимает изменения.Если мы коснемся app.scss, то изменения _mypartial.scss будут выбраны по желанию.

Фрагменты Gulpfile: 

gulp.task('styles-build-sass', function () {
  return buildSass(config.styles.postcss);
});

gulp.task(
  'styles',
  gulp.series(
    'styles-clean-entry',
    'styles-build-sass',
    'styles-minify',
    'styles-staging',
    'styles-clean-exit',
  )
);

function buildSass(settings)
{
  return gulp

  .src(settings.src)

  .pipe(plugins.plumber({
    errorHandler: handleErrors
  }))

  .pipe(plugins.sass({
    errLogToConsole: true,
    outputStyle: 'expanded
  }))

  // Create *.css.
  .pipe(gulp.dest(settings.dest)).on('end', function () {
    plugins.log((plugins.colors.symbols.check) + " " + 
    (plugins.colors.bold.green.underline('Stage 2: Sass has been 
    compiled into native CSS ... [buildSass()]')));
  })

}

1 Ответ

0 голосов
/ 27 января 2019

Поскольку вы не предоставили содержимое вашей gulpfile.js, и я не знаю структуру ваших каталогов - вот кто предположил, что я сделал из ваших вопросов:

  1. Я полагаю, что выесть задача наблюдения за SCSS, которая выглядит примерно так: gulp.watch('styles/*.scss', ['styles']);
  2. Я полагаю, что ваши партиалы хранятся в подкаталогах основного файла SCSS

Если мои предположения верны - тогда ответьтеэто довольно просто.Обратите внимание, что определение glob - styles/*.scss.Это означает, что «все файлы с .scss расширениями, которые непосредственно находятся в каталоге styles».Поскольку партиалы хранятся в подкаталогах - они просто не соответствуют этому глобу и, следовательно, не просматриваются.

Исправление также довольно простое - вам нужно обновить свой глобус просмотра, чтобы включить подкаталоги: styles/**/*.scss

...