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

Мы запускаем 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 создается и помещается в каталог назначения с той же отметкой времени, что и при последней «обработке» app.scss, но без изменений, внесенных в частичный файл.

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

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

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

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

ПРИМЕЧАНИЕ. Это тестовые файлы для устранения проблемы. Если все, что мы делаем, это касаемся _mypartial.scss, т. е. меняем значение margin-left на какое-то другое значение, запуск 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()]')));
  })

}

Не могли бы вы опубликовать соответствующие части вашего gulpfile?

— 27.01.2019 09:25

Я запускаю задачу вручную, т. Е. gulp styles, из CLI, необходимого для устранения этой проблемы на данный момент. Я также обновил вопрос выше, добавив дополнительную информацию.

— 27.01.2019 17:37

Прошел год и у меня точно такая же проблема. Вы когда-нибудь находили реальное решение? Я заметил, что вы закрыли свою собственную проблему в репозитории Github с глотком дерзости. Мой обходной путь на данный момент — просто внести какое-то фиктивное изменение, которое вызовет повторную компиляцию, а затем удалить это изменение и сохранить заново.

— 07.01.2020 13:13

То же самое, @cjl750. Не могли бы вы решить эту проблему?

— 30.03.2021 08:46

@ Dong3000 Dong3000 Я поднял проект, над которым работал, когда сделал этот комментарий, и дерзкий глоток, кажется, отлично работает с частичными частями. К сожалению, я не уверен, что предложить в качестве ответа, потому что я действительно не помню, что я в итоге сделал, и я не вижу никаких коммитов, которые явно предлагают решение проблемы. Я могу сказать вам, что я использовал gulp-ruby-sass раньше и перешел на gulp-sass, что потребовало небольшого изменения синтаксиса в задаче Gulp, что, возможно, было моей проблемой. Если вы также обновляетесь с gulp-ruby-sass, я бы посоветовал просто внимательно прочитать документы gulp-sass.

— 30.03.2021 19:33

npm sass gulp gulp-sass

27.01.2019 08:46

Настройка шаблона Metronic с помощью Webpack и Gulp

Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...

1 098

Ответы 1

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

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

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

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

— 27.01.2019 17:37

@GregoryMatthews Что в settings.src вы передаете в gulp.src?

— 27.01.2019 18:31

Это в основном просто srcDirs.scss + '*.scss'. Я также пробовал его как srcDirs.scss + '**/*.scss'. srsDirs разрешается в /assets/src/scss.

— 27.01.2019 18:38

Разве это не должно быть srcDirs.scss + '/*.scss'? В противном случае вы получите неверный путь

— 27.01.2019 18:50

Нет, потому что все, что я делаю, это подключаю app.scss, и опять же, когда я запускаю это вручную, все работает. Проблема в том, что если все, что я делаю, это вношу изменения в mypartial.scss, не касаясь app.scss, изменения, внесенные в mypartial.scss, не видны в результирующем файле .css (даже если app.scss получает это через @import). Если я коснусь app.scss, то отобразятся изменения, внесенные в mypartial.scss. Я не уверен, почему gulp sass просто не перекомпилирует все, что определено, независимо от того, был ли файл «тронут».

— 27.01.2019 19:05

Это действительно странно. Похоже на проблемы с кешем, но node-sass сам по себе не имеет кеша. Или, может быть, вы используете другую реализацию, например. Ruby (у которого есть собственный кеш)? Я бы попытался закомментировать весь код и начать заново с минимальным рабочим примером, который можно найти в gulp-sass документы. Если заработает - значит проблема в вашем gulpfile.js, если нет - где-то еще, но может быть хорошей отправной точкой

— 27.01.2019 19:10

10-4. Я тоже думал о проблеме с кэшированием, но нигде не мог найти настройку. Я начну разбирать его. Спасибо.

— 27.01.2019 19:13

Хорошо, после долгих испытаний я обнаружил, что партиалы теперь обновляются при изменении комментариев и/или имен классов, т. е. с .row на .row1, но при изменении числовых значений класса, т. е. с margin-left: 25px; на margin-left: 15px;, изменения не выбираются. вверх только при касании частичного. Любая идея, почему это может быть?

— 27.01.2019 23:21

Когда я меняю значение margin-left через переменную SASS, все работает отлично. Я предполагаю, что SASS не распознает частичные обновления @import, когда изменения уже внесены в css вместо SASS?

— 27.01.2019 23:28

Это не ожидаемое поведение. Может быть, стоит попробовать запустить узел-дерзость напрямую, а не через Gulp, чтобы увидеть, проблема в компиляторе Sass или в Gulp? Вы также можете вместо этого попробовать дерзкий дротик.

— 28.01.2019 00:30

27.01.2019 10:24