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

Question

[TtT RrR]

Есть папка 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

Comments

[Ankhena]

https://www.sitepoint.com/simple-gulpy-workflow-sass/

[TtT RrR]

Ankhena, я хочу работать не только с одной папкой, а с несколькими. из css/ брать что-нибудь.
мне два конфига сделать?

[its2easyy]

если ты добавил в includePaths 'css/scss/', а @use 'css/scss/vars' as v; оставил как было, то sass будет искать файл в ./css/scss/css/scss/vars' относительно gulpfile. Так что попробуй сократить путь при импорте до @use 'vars' as v;, чтобы там был только путь после твоего адреса в includePaths

[TtT RrR]

its2easyy, бесполезно. Gulp находится в корне проекта.

messageOriginal: Can't find stylesheet to import.
  ╷
2 │ @use 'mixins' as m;
  │ ^^^^^^^^^^^^^^^^^^
  ╵
  - 2:1  root stylesheet
    relativePath: bitrix/templates/default/components/bitrix/catalog.section/products-list/style.scss
    domainEmitter: [object Object]
    domainThrown: false

Vars определился вот так, а mixins не хочет.

@use '../../../../../../../css/scss/vars' as v;
@use 'mixins' as m;

[its2easyy]

TtT RrR, а какая версия gulp-sass установлена? если недавняя 6.0.0, то там новый апи по умолчанию используется, где вместо includePaths сейчас loadPaths. Можешь проверить меняется ли что-то при смене варианта 'outputStyle', потому что он тоже поменялся в новой версии

[TtT RrR]

its2easyy, да, оказалось новая. из-за этого тупняк был.
сработало на loadPaths

Answer 1

[TtT RrR]

Пришлось почитать доки 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
});