Как импортировать переменные sass во вложенных папках?

Есть папка css/ с sass стилями, переменными, миксинами. В ней я могу пользоваться спокойно делать импорт с путями ../vars, ../../mixin и т.д.
Что можно сделать, если я хочу в другой папке использовать миксин без использования большого ../../../../, в моём случае в папке компонента битрикс?
GPT сборщик gulp предлагает, но в итоге ошибку даёт, что не видит файлы. Тоже самое PhpStorm.
Почему-то только Live Sass Compiler в VSCode компилирует без проблем, а хотел бы в проектах не только им пользоваться.
Webpack, Vite не пробовал.

Пример bitrix/templates/components/style.scss:

@use 'css/scss/vars' as v;

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

Сборщик Gulp

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

// Путь к основной папке с партиалами
const scssPath = 'css/scss/';
// Путь к папке, где нужно компилировать файлы
const templatesPath = 'bitrix/templates/**/';

gulp.task('sass', function() {
    return gulp.src(`${templatesPath}**/*.scss`) // Найдем все .scss файлы
        .pipe(sass({
            includePaths: [scssPath], // Указываем дополнительные пути для поиска
            outputStyle: 'expanded'
        }).on('error', sass.logError))
        .pipe(gulp.dest(function(file) {
            return path.dirname(file.path); // Сохраняем файлы в той же директории
        }));
});

// Создаем задачу по умолчанию
gulp.task('default', gulp.series('sass'));

Результат компиляции с ошибкой

Error in plugin "sass"
Message:
    bitrix/templates/components/style.scss
Can't find stylesheet to import.
  ╷
1 │ @use 'css/scss/vars' as v;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  - 1:1  root stylesheet