Why won't the mixin connect?

Question

Sass

I am mastering gulp and sass and in the process the following error occurred: I create a mixins.scss file, import it into the main style.scss file and then start applying it where it is needed.
as a result, after running the gulp watch command, the following error is written in the terminal:
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)
at the same time, safari writes that it cannot connect to the localhost server, and everything is correct in chrome.
what could be the problem?

Answer 1

pp/sass/blocks/ main-header .scss
pp/sass/blocks/ _main-header .scss
The fact is that you import the mixin into the main file, include blocks in the same main file.
But your block files do not start with an underscore and sass thinks they need to be compiled separately too. After your main file with all the connections has been compiled, other found files without underlining are added to the queue. The compiler takes main-header.scss and processes it separately. But! there is no mixin connection in this file.
I have outlined the essence of the problem for you.
Solution - all files from which a separate css file should not be obtained must be named starting with an underscore. Mixin files are better too.

Answer 2

Such an error can also occur if, for example, you include a mixin file after the file in which you call it. For example:
import 'blocks/promo';
import 'base/mixins';
If you @include the mixin in the promo file, it will give a similar error. You should swap imports:
import 'base/mixins';
import 'blocks/promo';