Куда нужно прописывать @import в gulp 4,чтобы установить библиотеку?

В Gulp 4, когда вы хотите подключить какую-либо библиотеку через @import, вам нужно использовать инструмент под названием Gulp Sass. Gulp Sass позволяет компилировать Sass в CSS и поддерживает возможность импортирования других Sass файлов.

Для установки Gulp Sass вам нужно выполнить следующую команду в командной строке:

npm install gulp-sass --save-dev

После успешной установки вы сможете импортировать файлы Sass, используя @import в вашем основном файле Sass.

Вот пример gulpfile.js для компиляции Sass, используя Gulp и Gulp Sass:

const gulp = require("gulp");
const sass = require("gulp-sass");

function compileSass() {
  return gulp
    .src("src/scss/main.scss") // здесь указывается основной файл Sass
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("dist/css")); // здесь указывается путь, куда будет скомпилирован CSS
}

function watch() {
  gulp.watch("src/scss/**/*.scss", compileSass); // здесь указывается наблюдаемая директория за изменениями файлов Sass
}

exports.default = gulp.series(compileSass, watch); // задача по умолчанию для компиляции и наблюдения за Sass файлами

В приведенном выше примере мы определяем две основные задачи: compileSass для компиляции Sass в CSS и watch для наблюдения за изменениями Sass файлов. Когда файлы Sass изменяются, компиляция Sass будет запускаться автоматически.

Теперь, чтобы импортировать другие файлы Sass в ваш файл main.scss, просто используйте @import и указывайте относительный путь к файлу Sass без расширения. Например:

@import "partials/_variables";
@import "partials/_buttons";

В этом примере, мы импортируем файлы _variables.scss и _buttons.scss из директории partials, находящейся в той же папке, где и файл main.scss.

После запуска задачи Gulp, файл main.scss будет скомпилирован в CSS, и все импортированные файлы Sass будут объединены в одном CSS файле в заданной каталоге назначения.