0

Дело, собственно не в 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. Вид в отладчик Chrome

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

1
  • Пока решил костылями !important, но буду признателен за более правильное решение. 14 июл 2020 в 2:45

3 ответа 3

0

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

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

.no-webp .withbg {
  background: url(../img/morskiye_vodorosli_mini.jpg); }
1
  • Я бы рад, но такая последовательность генерируется плагином gulp-webpcss 13 июл 2020 в 15:24
0

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

0

Проблема в том что 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); }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.