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

Question

[Nik_1011]

Привет.

Вопрос такой: есть gulp 4, нужно установить библиотеку tippy.js, но когда прописываю в файле main.scss @import 'tippy.js/dist/tippy.css'; в итоговом файле он просто прописывает данную строчку с кодом, а не сохраняет туда, установленную библиотеку.

Как поступить?

Answer 1

[Максим Самусевич]

По поводу самой директивы @import в main.scss: сейчас рекомендуется использовать вместо неё @use, общий смысл остаётся тем же. Подробнее можете прочитать на официальном сайте.

Для подключения стилей библиотеки нужно прописать правильный путь до файла относительно того файла, в который подключаете, main.scss в вашем случае. Где у вас лежит библиотека, в node_modules? Относительный путь выглядит, например, так: ../../node_modules/tippy.js/dist/tippy.css: это значит выйти на один уровень папок выше два раза (две точки), затем зайти в несколько папок вглубь и выбрать нужный файл. Я думаю, вас запутал путь до CSS файла, указанный в описании пакета npm, там путь указывается для импорта с помощью ES modules в js файл, чтобы потом собирать с помощью бандлеров типа Webpack. Вы хотите подключить CSS файл в SCSS, так что попробуйте прописать путь, как я описал.

Для подключения JS части библиотеки потребуется import в ваш main.js или index.js с помощью ES modules, как описано на странице пакета библиотеки. В идеале потом, чтобы бандлер обработал Js: собрать в один файл, Babel, минификация и другие операции с JS кодом. Можно, конечно, и с помощью Gulp сконкатенировать все JS файлы без бандлеров, но нужно следить за порядком конкатенации, есть и другие нюансы, и это в целом неудобно. Я использую связку Gulp для всего кроме JS, а Webpack — для JS, соединяются они через webpack-stream.

Чтобы заработали ES modules, добавьте "type": "module" в ваш package.json.

Удачи)

Answer 2

[pjery3]

А для чего вам gulp, если вы импортируете напрямую в файл?
Если у вас сборка на функциях то даю кусочек того как это реализовано у меня:

const { src, dest, watch, parallel, series } = require('gulp');
const sass         = require('gulp-sass')(require('sass'));
const concat       = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');


function styles() {
	return src([  // в массиве прописываю все нужные мне пакеты
                'node_modules/tippy.js/dist/tippy.css', // так будет выглядеть в вашем случае
		'node_modules/swiper/swiper.min.css',
		'node_modules/jquery-custom-select/dist/css/jquery.custom-select.min.css',
		'src/sass/*.scss'
	])
		.pipe(sass({outputStyle: 'compressed'}))
		.pipe(concat('style.css'))
		.pipe(autoprefixer({
			overrideBrowserslist: ['last 8 versions']
		}))
		.pipe(dest('../build/css'));
}

Comments

[Nik_1011]

спасибо за ответ, изначально делал так,как у вас написано,вот ссылка на библиотеку и как её подключить, впервые увидел такое. Вот непонятно куда эти import надо размещать

[Максим Самусевич]

Nik_1011, ответил на эти ваши вопросы в своём ответе ниже)

Answer 3

[inkShio]

На самом деле можно сделать проще, добавь это в такс

.pipe(sass({
      includePaths: ['./node_modules'],
    }))

и дальше в scss подключай так (на примере бутстрапа)

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/grid';