Привет.
Слово устал тут не подходит, но не об этом. Уже запарился с настройкой так, что хочется на потолок залезть. Помогите, пожалуйста, корректно настроить. Пользовался этим делом «потольку – поскольку».
Есть три файла:
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 нормально завелись?
Простой
