Как можно импортировать переменные Sass, если они находятся во вложенных папках?

Для успешной работы с Sass и импортом переменных, миксинов или других стилей из вложенных папок в Gulp, нужно правильно настройить пути в вашей конфигурации. Обычно проблемы с импортом возникают из-за того, что компилятор не может найти указанные файлы. 

Вот несколько шагов, чтобы решить вашу проблему:

### 1. Обновление конфигурации Gulp
Убедитесь, что вы правильно используете `includePaths` для указания всех необходимых директорий, из которых нужно импортировать Sass файлы. В вашем случае, вам нужно указать оба пути: к директории со стилями (`css/scss/`) и к директории с компонентами (`bitrix/templates/`). Например:

```javascript
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const path = require('path');

const scssPath = path.join(__dirname, 'css/scss');
const templatesPath = path.join(__dirname, 'bitrix/templates/**/');

gulp.task('sass', function() {
    return gulp.src(`${templatesPath}**/*.scss`)
        .pipe(sass({
            includePaths: [scssPath, path.join(__dirname, 'bitrix/templates/components/scss')], 
            outputStyle: 'expanded'
        }).on('error', sass.logError))
        .pipe(gulp.dest(function(file) {
            return path.dirname(file.path);
        }));
});

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

### 2. Правильное использование @use
Убедитесь, что вы правильно используете путь при импорте. Если вы используете `@use`, он должен быть относительным к `includePaths`. В вашем случае убедитесь, что импорты в вашем SCSS файле выглядят так:

```scss
@use 'vars' as v; // предполагая, что vars находится в папке, указанной в includePaths

.style {
  background-color: v.$color_1;
  color: blanchedalmond;
}
```

### 3. Проверка ошибок
Чтобы лучше понять, в чем именно проблема с компиляцией, стоит добавить дополнительное логирование ошибок во время компиляции, чтобы видеть, какие файлы не удается найти или были ли другие ошибки, которые могут влиять на процесс.

### 4. Структура проекта
Убедитесь, что структура каталогов правильная и что все необходимые Sass файлы находятся в указанных директориях. Такой подход поможет избежать ошибок, связанных с отсутствующими файлами.

### 5. Установка зависимостей
Убедитесь, что у вас установлены все необходимые зависимости для работы с Gulp и Sass. Например, следите за версиями `gulp-sass` и `sass`.

### Заключение
После внесения изменений протестируйте вашу конфигурацию Gulp, запустив задачу Gulp, и убедитесь, что ошибки, связанные с импортом файлов, исчезли. Если проблемы все еще остаются, проверьте все пути и доступность файлов, чтобы убедиться, что они действительно существуют на указанных вами путях.

Пришлось почитать доки gulp-sass v6, вместо includePaths теперь используется loadPaths. 
 Спасибо its2easyy . 
 
 Пример тасков для двух папок на ES6 gulpfile.mjs: 
 
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);

import gulp from 'gulp';
import gulpAutoPref from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';
import rename from 'gulp-rename';


// Путь к основной папке scss
const mainPath = 'css/**/*.scss'
// Путь к основной папке с партиалами
const scssPartials = 'css/scss';
// Путь к папке с битрикс шаблоном сайта
const templatesPath = 'bitrix/templates/default/**/*.scss';

gulp.task('sass', function () {
    return gulp.src(mainPath) // Найдем все .scss файлы
        .pipe(sourcemaps.init())
        .pipe(sass({
            style: 'expanded',
        }).on('error', sass.logError))
        .pipe(gulpAutoPref([
            "last 15 versions",
            "not dead",
        ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(file => file.base)) // Сохраняем css рядом с scss
});

gulp.task('bx-sass', function () {
    return gulp.src(templatesPath) // Найдем все .scss файлы
        .pipe(sourcemaps.init())
        .pipe(sass({
            loadPaths: [scssPartials], // Указываем дополнительные пути для поиска
            style: 'expanded',
        }).on('error', sass.logError))
        .pipe(gulpAutoPref([
            "last 15 versions",
            "not dead",
        ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(file => file.base)) // Сохраняем css рядом с scss
});