Как связать в gulp scss + glob + @use?

Для связывания scss, glob и @use в Gulp.js нам понадобятся несколько плагинов. В данном случае мы будем использовать плагины gulp-sass, gulp-sass-glob и gulp-imports.

1. Установка зависимостей:

   npm install gulp gulp-sass gulp-sass-glob gulp-imports --save-dev

2. Импорт необходимых модулей:

   const gulp = require('gulp');
   const sass = require('gulp-sass');
   const sassGlob = require('gulp-sass-glob');
   const imports = require('gulp-imports');

3. Создание задачи Gulp для компиляции scss файлов:

   gulp.task('sass', function() {
     return gulp
       .src('src/styles/main.scss')  // исходный файл, в котором будут импортированы все необходимые файлы
       .pipe(sassGlob())  // добавляем поддержку глобального импорта
       .pipe(imports())  // заменяем @use на @import
       .pipe(sass())  // компилируем scss в css
       .pipe(gulp.dest('dist/styles'));  // сохраняем скомпилированные файлы
   });

4. Запуск задачи:

   gulp.task('default', gulp.series('sass'));

Теперь при выполнении команды gulp ваш scss файл будет компилироваться в css с использованием глобального импорта и заменой @use на @import.

Обратите внимание, что в примере выше используется файл main.scss в папке src/styles. Вы можете настроить путь к вашему файлу scss в функции gulp.src согласно вашей структуре проекта.

Также, не забудьте настроить правильный путь для сохранения скомпилированных файлов в функции gulp.dest. В данном примере они сохраняются в папке dist/styles.