Gulp + webpcss обнуляются свойста css

Question

Дело, собственно не в Gulp, а что-то не так с самим CSS. Имеется следующий код:

body {
  font-family: Arial;
  display: flex;
  flex-direction: column;
  font-size: 16px;
}

span {
  font-size: 20px;
}

.no-webp .withbg {
  background: url(../img/morskiye_vodorosli_mini.jpg); }

.withbg {
  border: 1px solid green;
  font-size: 30px;
  background-size: cover;
  background-position: center;
}

@media (max-width: 767px) {
  span {
    font-size: 14px;
  }

  .withbg {
    font-size: 25px;
  }
}

.webp .withbg { background: url(../img/morskiye_vodorosli_mini.webp); }

Js добавляет к BODY класс .webp, если последний поддерживается браузером. Проблема в том, что когда у элемента, к которому добавился класс .wepb в CSS зачеркиваются все свойства, кроме URL.

Похоже, я что-то недопонимаю в наследовании классов. Но этот код сгенерил популярный Gulp-плагин webpcss.

Answer 1

попробуй сверху поставить

.withbg {
  border: 1px solid green;
  font-size: 30px;
  background-size: cover;
  background-position: center;
}

.no-webp .withbg {
  background: url(../img/morskiye_vodorosli_mini.jpg); }

Answer 2

Обычно так делает gulp-shorthand. Например, заменяет background-image на сокращенную запись background и отменяет background-position, что критично для работы спрайтов. Удалите из потока задачу shorthand или ей подобную либо перенесите её выше - до webpcss, чтобы она не укорачивала лишнего.

Answer 3

Проблема в том что webp перезаписывает ваше свойство:

.no-webp .withbg {
  background: url(../img/morskiye_vodorosli_mini.jpg); }

в конце файла (посмотрите генерируемый css файл) и соответственно обнуляет background. Мое решение уточнять все свойства background, в вашем случае:

.no-webp .withbg {
   background-image: url(../img/morskiye_vodorosli_mini.jpg); }

БЛОГ НА HUSL

Gulp + webpcss обнуляются свойста css

Ответы (3 шт):