Gulp не работает import

Gulp @import Ошибка

Пытаюсь в scss файл импортировать css файл:

В Gulp выдает предупреждения :

В итоге стили не не рабоатют! Gulp config:

2 ответа 2

Все куда проще, они более не поддерживают иморт css. Или конвертируйте css в scss, либо укажите уже к готовому файлу в библиотеке в формате scss. По крайней мере я перекачал библиотеки и подключил scss файлы.

Как вариант использование библиотеки gulp-cssimport

Update: Нашел решение для себя еще одно, при импорте нужно указать расширение файла .css

Ваш gulpfile.js у меня отрабатывает как положено но с путями к файлам правильными.

Исходя из вашего gulpfile.js, файл в котором находится строка @import ‘app/libs/fonts’; расположен в каталогe app/sass/ или вложенных в него каталогах и ваш файл.css находится в папке app/libs/fonts/ , надо проверить:

Если sass файл расположен в каталогe app/sass/ тогда строка импорта должна быть такой:
@import ‘../libs/fonts/файл.css’;

Если sass файл расположен во вложенном каталогe app/sass/**/ тогда строка импорта должна быть такой:
@import ‘../../libs/fonts/файл.css’;

Если файл с импортом расположен по другому пути то исправляйте пути в этом месте:
return gulp.src(‘app/sass/**/*.+(sass|scss)’)

Если после этого не заработало пробуйте проделать это:

1. Удали из папки node_modules которая в проекте папку gulp-sass
2. Удали строку gulp-sass из package.json
3. Удали если есть node-sass из package.json
4. Запусти установку npm install gulp-sass —save-dev

Думаю это должно помочь, но обязательно проверьте пути.

Источник

Gulp-sass выдает ошибку, когда применяются изменения в @import-файлах

Использую gulp-sass для компиляции scss файлов. В одном каталоге находится главный файл style.scss и файл, который импортируется в главный print.scss. main.scss нормально компилируется без ошибок и принимает значения в файле print.scss, но как только я хочу сохранить изменения в файле print.scss, выдает ошибку:

Ниже привожу файл gilfile.js и остальные файлы которые могут помочь для решения данной проблемы.

Общий html-код элемента:

Код элемента где вложенность .scss (style.scss) работает:

Как это исправить и что здесь не так ?

4 ответа 4

Я нашел такой выход из данной ситуации:

1) Устанавливаем gulp-sass-glob;
2) В задачах ставим его перед отслеживанием sass;
3) Устанавливаем вывод ошибки но не прекращение процесса отслеживания;
4) В случае ошибки несколько раз сохраняем файл, пока система не применит изменения или просто разово сохраняем главный файл, куда импортируем дочерние;
5) Все миксины и переменные придется импортировать в каждый файл, потому как в друго случае работать они не могут.

P.S это один из вариантов решения, ничего по делу не нашел, если кто-то знает более еффективный путь решения, буду рад увидеть и применить! Заранее спасибо!

Есть как минимум 3 варианта исправления проблемы:
1. Предполагает хорошее понимание Node.js , а так же работу node-sass и libsas , которые собственно и выполняют компиляцию файлов.
Его суть заключается в написании собственного обработчика подключаемых файлов. Если заглянуть в документацию к node-sass , то можно увидеть в объекте options ключ importer , который на самом деле является пользовательской функцией. Когда LibSass встречает директиву @import . Пользовательский импортер позволяет расширить движок LibSass как в синхронном, так и асинхронном режиме.
2. Этот способ основан на небольшом хаке в watch задаче и сводиться к добавлению таймера на выполнение sass задачи:

Здесь я использовал плагин gulp-watch , но думаю и со стандартным галповским вотчером это прокатит.
3. Использование именно плагина gulp-watch , он принимает вторым параметром объект с опциями, среди которых есть задержка равная по умолчанию 10 миллисекундам.

Подробнее можно почитать в документации

в style.scss надо сделать:

т.е. без нижних подчеркиваний. Из-за них и ошибка была.

Источник

Ошибка подключения пакета gulp-imagemin

Установил gulp-imagemin командой npm i -D gulp-imagemin после подключил его в gulpfile.js const imagemin = require(«gulp-imagemin»);

При попытке запустить gulp получаю вот такую ошибку:

Из текста ошибки решил что нужно подключить через import import imagemin from «gulp-imagemin»; после чего ошибка изменилась

Погуглив нашёл другой вопрос https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module и попытался использовать решение в виде добавления в файл package.json «type»: «module» но это ломало подключение остальных пакетов. Все подключали gulp-imagemin через require, а также в первой ошибке сказано что нужно наоборот удалить «type»: «module» . Решил что иду не в том направлении и проблема в установке.

Сначала установил uuid версии 7.0.3 при помощи команды npm i uuid . Далее посмотрел детали 3 уязвимостей статута «high» которые появились после установки gulp-imagemin.

Перешёл по ссылке https://npmjs.com/advisories/1753 где было сказано что нужно установить trim-newlines нужной версии. Я установил trim-newlines версии 4.0.2 командой npm install trim-newlines

После переустановки gulp-imagemin нечего не изменилось. Просьба обновить uuid и 3 уязвимости остались. Чистка кеша с атрибутом —force, переустановка и полное удаление node.js по инструкции в вопросе https://stackoverflow.com/questions/20711240/how-to-completely-remove-node-js-from-windows нечего не изменили.

Поиск решения приводил к ошибкам установки или ошибкам непосредственной работы пакета. Никаких похожих проблем именно с подключением не нашёл.

Источник

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module?

История
Делал настройку gulp по видео уроку. По началу все прекрасно работало, но как дошел до установки плагина «imagemin» возникли проблемы. Установил плагин при помощи кода npm install —save-dev gulp-imagemin

Компилятор

Я так понял там какие то проблемы с модулем. То есть, должен быть «ES module, а у меня используется «CommonJS» (что бы это ни значило). На форумах прочитал создать еще один «package.json» в папке «src», и прописать там <"type": "module">. Но это не помогло.

• Вопрос задан 18 авг.
• 2325 просмотров

alexblackstone, а gulp-image так же ужимает размер файла ?
В плане задачи.

Поставил. Проверил. Работает.
Спасибо )

alexblackstone, Ух, эта сборка сделает седым.
При установке другого модуля «webpcss» далее.

Выдаёт новые приключения:

Error: Cannot find module ‘webp-converter/cwebp’
Require stack:
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\WebpBase64.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\Webpcss.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\index.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\gulp-webpcss\index.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\gulpfile.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\index.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:962:15)
at Function.Module._load (internal/modules/cjs/loader.js:838:27)
at Module.require (internal/modules/cjs/loader.js:1022:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\WebpBase64.js:33:19)
at Module._compile (internal/modules/cjs/loader.js:1118:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
at Module.load (internal/modules/cjs/loader.js:982:32)
at Function.Module._load (internal/modules/cjs/loader.js:875:14)
at Module.require (internal/modules/cjs/loader.js:1022:19) <
code: ‘MODULE_NOT_FOUND’,
requireStack: [
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\webpcss\\dist\\WebpBase64.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\webpcss\\dist\\Webpcss.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\webpcss\\dist\\index.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\gulp-webpcss\\index.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\gulpfile.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\shared\\require-or-import.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\index.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\bin\\gulp.js’
]
>

Установил module ‘webp-converter’.
А вот как его применить не понимаю пока.

Источник

gulp sass, не работает @import

Спросил VeniVidiVici,
10 декабря 2015

Вопрос

VeniVidiVici

Может кто сталкивался с подобным, не могу импортировать другие sass файлы в основной (main.sass)

К примеру подключение стилей файла reset.sass:

После запуска компилятора, появляется ошибка

Гуглил, предлагают вставить строчку includePaths: [‘./styles’] ,либо плагины. Но почему-то всё равно не получается((

Изменено 11 декабря 2015 пользователем VeniVidiVici

Ссылка на комментарий

Поделиться на других сайтах

16 ответов на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Похожие публикации

Всем привет народ! Очень надеюсь на вашу помощь! Дело в том что я создавал сайты по видео урокам некого Михаила Базарова. Вот собственно его видео уроки https://camouf.ru/video/new_store/phpstorm.html?PAGEN_2=2
Теперь конкретно о проблеме: Дело в том, что данный человек использует bootstrap и sass. Он компилирует все стили в сжатый css. В этом то и проблема. У меня не компилируется, а стили на сайте не работают.
Что я сделал: установил Ruby, прописал в командной строке gem install sass, успешно установился. Перезагрузил компьютер и подключился к своему удаленному серверу через PhpStorm. Обмен между локальным и удаленным сервером идет успешно. Но на сайте не работают стили прописанные в sass
Скрин https://imgur.com/a/vV6QZBV

UPD: Оказалось что путь к файлам неверный, мог бы кто нибудь помочь настроить?

Здравствуйте! Не могу сделать импорт в sass. Не могу понять в чем дело? По урокам делал, как все показывали, но не выходит! Импорт для оптимизаций и адаптаций сайта

Источник