Почему не подключается миксин?

Question

[Anna]

осваиваю gulp и sass и в процессе возникла следующая ошибка: создаю файл mixins.scss, делаю его импорт в основной файл style.scss и далее начинаю применять там, где он нужен.
в итоге после запуска команды gulp watch в терминале пишется следующая ошибка:

events.js:163
throw er; // Unhandled 'error' event
^
Error: app/sass/blocks/main-header.scss
Error: no mixin named mobile-wrapper

Backtrace:
app/sass/blocks/main-header.scss:22
on line 22 of app/sass/blocks/main-header.scss
>> @include mobile-wrapper;
-------------^

at options.error (/Users/anndarina/Documents/Projects/pink/site/node_modules/node-sass/lib/index.js:291:26)

при этом сафари пишет, что не может подключиться к серверу localhost, а в хроме все корректно.
в чем может быть проблема?

Comments

[Danila]

Error: no mixin named mobile-wrapp
в этом?

[alvvi]

Покажите порядок импортов в индексе (или куда вы там импортируете их)

Answer 1

[Сергей delphinpro]

pp/sass/blocks/main-header.scss
pp/sass/blocks/_main-header.scss

Дело в том, что вы импортируете миксин в главный файл, в этот же главный подключаете блоки
Но файлы блоков у вас не начинаются с подчеркивания и sass думает, что их тоже надо скомпилировать отдельно. После того как ваш главный файл со всеми подключениями скомпилился, на очередь идут другие найденные файлы без подчеркивания. Компилятор берет main-header.scss и обрабатывает его отдельно. Но! в этом файле нет подключения миксина.
Это я вам суть проблемы обрисовал.
Решение - все файлы, из которых не должен получаться отдельный css файл нужно именовать, начиная с подчеркивания. Файлы с миксинами лучше тоже.

Comments

[Anna]

большое спасибо за ответ!

Answer 2

[tBACK]

Такая ошибка может возникать также, если вы например подключаете файла миксина после того файла в котором его вызываете. Например:
import 'blocks/promo';
import 'base/mixins';

Если сделать @include миксина в файле promo, то выдаст подобную ошибку. Следует поменять импорт местами:
import 'base/mixins';
import 'blocks/promo';