N
N
Nikita2019-07-05 17:36:56
css
Nikita, 2019-07-05 17:36:56

Gulp-sass compiles to CSS when there is a typo in the code. What to do?

Updated from gulp 3 to gulp 4, also updated other packages, among which was gulp-sass (upgrade from 4.0.1 to 4.0.2). After these procedures, there was a problem of incorrect compilation in CSS, namely, when I make a typo outside the SCSS block, then gulp-sass still continues compilation, breaking the layout between CSS blocks at the place of the typo.
I have not found a similar problem and its solution anywhere, can anyone come across this?

//SCSS

opechatka   //не вижу проблем - скомпилирую

.soc {
  opechatka   //ошибку обнаружил, не компилирую
  display: flex;
  padding-left: 15px;
}

In the first case, the console does not give any error, it writes about the successful completion of the task "Finished 'sass' after XX ms".
In the second case, an error is output to the console and, accordingly, nothing is compiled in CSS.
An example of how the compilation is going:
//SCSS

OPECHATKA

.burger {
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    background-color: #E3CD56;
  }
  &:active {
    background-color: #DBAA35;
    transition: none;
  }
}

Will compile to:
//CSS

OPECHATKA
.burger {
  display: flex;
  justify-content: center;
  align-items: center; }
  OPECHATKA
.burger:hover {
    background-color: #E3CD56; }
  OPECHATKA
.burger:active {
    background-color: #DBAA35;
    transition: none; }

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey delphinpro, 2019-07-06
@neins

Because the word opechatka is quite a valid expression for a tag. Yes, there is no such tag. But the compiler should not issue a white list of tags, as new ones may appear.
Both options

opechatka
.soc {
}

opechatka .soc {
}

syntactically identical.
And here you have an error, because there is no colon, value and semicolon
{
  opechatka
  display: flex;
}

I didn’t check it, but I think that such a variant will not cause an error either, for the reason described above:
{
  opechatka: 10px;
  display: flex;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question