weranda
@weranda

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

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

Есть три файла:
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 нормально завелись?
  • Вопрос задан
  • 115 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
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/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Switle
Если мешает ошибка в терминале, можете её скрыть так:
.pipe(sass({silenceDeprecations: ['legacy-js-api']}))
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы