Как корректно настроить Gulp + Sass?

Question

[weranda]

Привет.
Слово устал тут не подходит, но не об этом. Уже запарился с настройкой так, что хочется на потолок залезть. Помогите, пожалуйста, корректно настроить. Пользовался этим делом «потольку – поскольку».

Есть три файла:

main.scss
base.scss
banner.scss

В файле main.scss подключаю другие файлы:

@import 'base.scss';
@import 'banner.scss';

В файле base.scss устанавливаю некоторые переменные:
$color_0: #000;

В файле banner.scss пишу стили разные:

a{
    color: $color_0;
    text-decoration: none;
}

Устанавливаю Gulp + разные расширения:

sudo npm i gulp
sudo npm i gulp-autoprefixer
sudo npm i gulp-clean
sudo npm i gulp-group
sudo npm i gulp-plumber
sudo npm i gulp-rename
sudo npm i gulp-sass sass
sudo npm i gulp-uglify

Прописываю gulpfile.js

// Выводим служебные функции gulp
const  { src, dest, parallel, watch, series } = require('gulp');


// Объявляем используемые модули
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const gcmq = require('gulp-group-css-media-queries');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');

// Функция обработки стилей
function style() {
    return src('app/static/src/scss/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false,
            remove: false,
            overrideBrowserslist: ['last 80 versions']
        }))
        .pipe(gcmq())
        .pipe(cleanCSS({ level: 2 }))
        .pipe(rename('styles.min.css'))
        .pipe(dest('app/static/css'));
}

// Функция для тестового скрипта
function js() {
    return src('app/static/src/js/test.js')
        .pipe(uglify())
        .pipe(rename('test.min.js'))
        .pipe(dest('app/static/js'));
}

// Функция мониторинга изменений файлов (файл, функция)
function watcher() {
    watch('app/static/src/scss/*.scss', style);
    watch('app/static/src/scss/**/*.scss', style);
    watch('app/static/src/js/*.js', js);
}

// Экспортируем функцию
exports.style = style;


// Выполненение задач
exports.default = parallel(style, watcher)

Запускаю Gulp и, оно вроде работает, но выдает предупреждения такие:

...
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
7 │ @import "base.scss";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
    app/static/src/scss/main.scss 7:9  root stylesheet
...

Удаляю, устанавливаю последние версии пакетов, меняешь \@import на @use, но там другая фигня вылезает (к примеру, что-то типа того, что объявленная переменная не работает) и так по кругу. Подскажите, пожалуйста, как это все настроить / исправить. Вроде, все по инструкции, но как-то прям запарился, что мОчи нет. Может быть, в сети, где-то есть актуальная железобетонная инструкции для того, чтобы импорты, переменные, да и Sass нормально завелись?

Answer 1

[Сергей delphinpro]

C использованием @use подход принципиально меняется. Область видимости каждого подключаемого так модуля ограничена им самим, и потребуется импортировать из него необходимые сущности в каждом файле использования.

Можете просто не обращать внимания на предупреждения. Или понизить версию sass (кажется до 1.77.8)

Ну или пишите стили по-новому

main.scss

@use 'base.scss';
@use 'banner.scss';

base.scss
$_color: red;

banner.scss

@use './base';
a{
    color: base.$color;
    text-decoration: none;
}

Может быть, в сети, где-то есть актуальная железобетонная инструкции для того, чтобы импорты, переменные, да и Sass нормально завелись?

почитайте первоисточник https://sass-lang.com/documentation/at-rules/use/