Почему возникает ошибка при компиляции SCSS?

Question

[MaxVilson]

При компиляции SCSS в CSS, часто возникает ошибка. SCSS компилируется с помощью плагина gulp-sass.
Log ошибки:
events.js:160
throw er; // Unhandled 'error' event
^
Error: src\style\main.scss
Error: File to import not found or unreadable: ../blocks/main-header/main-header.
Parent style sheet: C:/Users/maxim/Desktop/Проекты/kimbirthday/src/style/main.scss
on line 5 of src/style/main.scss
>> /@import '../blocks/main-header/main-header';
^

at options.error (C:\Users\maxim\Desktop\Проекты\kimbirthday\node_modules\node-sass\lib\index.js:291:26)

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

Answer 1

[Егор Живагин]

Ааа, это дичь какая-то) У меня та же проблема, причём если после ошибки ещё несколько раз сохранить файл, то в какой-то момнет всё становится нормально.

Решением может быть gulp-concat .

Ошибка выводит из себя дико, конечно, ...

Comments

[MaxVilson]

Да, с этой ошибкой у меня уже больше нет сил))
gulp-concat помог тебе?

[Егор Живагин]

MaxVilson: я пользуюсь им в другом проекте и ошибок не наблюдал. Собственно, загвоздка в импорте, concat позволяет от них уйти. Но тут уж смотря, как всё у тебя реализовано и насколько concat будет уместен

[MaxVilson]

Спасибо! Посмотрю в строну concat.

Answer 2

[Дмитрий Беляев]

scss неадекватно воспринимает одинарные кавычки, думаю дело в этом
неплохо было бы увидеть фрагмент кода который вызывает ошибку

Comments

[MaxVilson]

.main-header {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px 20px;
text-align: center;
background: url(../img/main-header.jpg) no-repeat;
background-size: cover;

&__wrapper {
padding: 10px;
width: 100%;
height: 100%;
border: 2px dashed #434343;
}

&__title {
font-size: 2.4em;
margin-top: 50px;
color: $color-pink;
}

&__date {
font-size: 1.4em;
font-weight: 700;
color: #434343;
}

&__btn {
margin-top: 40px;
}
}

//Media querus
media (min-width: $grid-breakpoint-md) {
.main-header {

&__wrapper {
padding-bottom: 50px;
}

&__title {
font-size: 3em;
margin-top: 70px;
}

&__date {
position: relative;
font-size: 2em;
}

&__btn {
margin-top: 60px;
}
}
}

media (min-width: $grid-breakpoint-xl) {
.main-header {

&__title {
font-size: 4em;
margin-top: 100px;
}

&__date {
position: relative;
display: inline-block;
font-size: 2.5em;

&:before {
position: absolute;
left: -250px;
font-weight: 400;
content: '- - - - - - - - - -';
}

&:after {
position: absolute;
right: -250px;
font-weight: 400;
content: '- - - - - - - - - -';
}
}
}
}